javascript - 设置可观察到的 list 中的选择列表

我正在尝试使用选择列表的值进行计算，但是在选择数字时无法获取它。

当我返回选择的数量时，它返回一些javascript而不是数字

selectedQuantity是我尝试检索的值。

<table border="1">
    <thead><tr>
        <th>ID</th><th>Inventory</th><th>Quantity</th><th>Price</th><th>Total</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: itemNumbers">
        <tr>
            <td data-bind="text: ID"></td>
            <td data-bind="text: inventory"></td>
            <td><select data-bind="quantityDropdown: inventory, value: selectedQuantity"></select></td>
            <td data-bind="text: formattedPrice"></td>
            <td data-bind="text: itemTotal"></td>
            <td><a href="#" data-bind="click: $root.removeItem">Remove</a></td>
        </tr>
    </tbody>
</table>

这是JavaScript

function ItemEntry(ID, inventory, price) {
    var self = this;
    self.ID = ID;
    self.inventory = inventory;
    self.price = price;

    self.selectedQuantity = ko.observable(); //returned value (trying to get it at least!)

    self.itemTotal = ko.computed(function() {
        var price = self.price;
        var quantity = self.selectedQuantity;
        return quantity; //just returning quantity for now to verify correct value is selected
    });


    self.formattedPrice = ko.computed(function() {
        var price = self.price;
        return price ? "$" + price.toFixed(2) : "None";
    });
}

function EntryViewModel(newItem) {
    var self = this;
    self.newItem = newItem;


    //start the array with some items
    self.itemNumbers = ko.observableArray([
        new ItemEntry("1", 20, 22.50) //ID, inventory, price
    ]);

    // Computed data
   self.totalCost = ko.computed(function() {
       var total = 0;
        for (var i = 0; i < self.itemNumbers().length; i++) {
            total += Number(self.itemNumbers()[i].price);
        }
       return total;
    });

    self.removeItem = function(item) { self.itemNumbers.remove(item) }
}

//populate the select list with values up to the number in inventory (ex, if inventory is 3, it will fill with 0-7)
ko.bindingHandlers.quantityDropdown = {
    update: function(quantityDropdown, inventory, EntryViewModel) {
        var quantity = ko.utils.unwrapObservable(inventory());
        for(var i = 0; i <= inventory(); i++){
            $(quantityDropdown).append('<option value="' + i + '">' + i + '</option>');
        }
    }
};



ko.applyBindings(new EntryViewModel());

最佳答案

看起来self.selectedQuantity定义为（设置为）ko.observable。 Observables是函数，因此为了检索值，您应该像函数一样调用它：

self.itemTotal = ko.computed(function() {
    var price = self.price;
    //notice the parentheses here to execute the selectedQuantity observable and extract the variable.
    var quantity = self.selectedQuantity();
    return quantity; //just returning quantity for now to verify correct value is selected
});

另外，很高兴了解ko.computed函数如何工作。 ko.computed值将自动更新以反映对其中引用的任何ko.observable的更改。但是，依赖项跟踪机制使用可观察值的检索来检测正在使用可观察值并应对其进行跟踪。

换句话说，如果您希望在值更改时更新ko.compute，则需要像上面的代码示例中那样通过执行observable变量来引用该值。

KnockOut文档说它比我更好：http://knockoutjs.com/documentation/observables.html
http://knockoutjs.com/documentation/computedObservables.html。

关于javascript - 设置可观察到的 list 中的选择列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15892963/