Question

我有以下代码：

查看：

<table>
    <thead><tr>
        <th>Food</th><th>Quantity</th><th>Price</th><th>Total</th>
    </tr></thead>
    <tbody data-bind="foreach: lines">
    <tr>
        <td><input data-bind="value: name()" /></td>
        <td><input data-bind="value: quantity()"></td>        
        <td><input data-bind="value: price()"></td>
        <td data-bind="text: total()"></td>       
    </tr>    
</tbody>
</table>

视图模型：

function line(name, quantity, price) {
    var self = this;
    self.name = ko.observable(name);
    self.quantity= ko.observable(quantity);
    self.price = ko.observable(price);
    self.total = ko.computed(function(){
        var x = (self.quantity() * self.price());
        return x;
    }, self);
}

function MyViewModel() {
    var self = this;
    self.lines = ko.observableArray([
        new line("Steve", 2, 7),
        new line("Bert", 5, 9)
    ]);
};

ko.applyBindings(new MyViewModel());

当我运行它时，我得到了正确的初始打印输出，但是当我更改任何订单项的数量或价格时，总数不会改变，我在这里缺少什么？

Answer 1

您的计算值会正确更新，但您已将UI元素绑定到observables的原始值而不是实际的observable。删除括号，它应该工作。

e.g。将data-bind="text: total()"替换为data-bind="text: total"

KnockoutJS值不自动计算

1 个答案: