Question

我正在尝试使用选择列表的值进行计算，但是当它被选中时我无法检索它。

当我返回所选数量时，它返回一些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());

Answer 1

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

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.computed在值发生更改时更新，则需要通过执行上面的代码示例中的observable变量来引用该值。

KnockOut文档说它比我做得好得多：http://knockoutjs.com/documentation/observables.html http://knockoutjs.com/documentation/computedObservables.html

从knockout.js中的选择列表设置observable

1 个答案: