Question

我的网格包含产品列表{Name，Quatity，Price，Total} .I init <input id='Price'>，其值为0，当更改一个产品的Quatity时，自动计算的Total = Quatity * Price，Price = $('#Price').val()：

如果grid init为空，我工作正常，但是当我使用某个产品初始化Grid并将<input id='Price'>设置为值0时，计算不起作用。

我希望在更改<input id='Price'>时进行自动计算这是我在jsfiddle中的示例，但它不起作用。 http://jsfiddle.net/bd0ktx5r/5/

Answer 1

这是你想要的吗？ http://jsfiddle.net/bd0ktx5r/9/

我改变了一堆东西，因为起初我找不到错误，但是当我打开控制台时，我发现有很多语法错误等等。

我改变的主要内容是价格的输入字段：我将它绑定到我添加到viewmodel的observable，以便你的计算可以响应它的变化。为了实现这一点，必须将价格可观察值传递给Product的构造函数。

我还稍微清理了一下你的代码，希望能让它更易读，更容易理解。

问题是ko.computed ONLY会响应它使用的observables（依赖项）的变化。因为您使用jQuery从输入字段获取值，所以ko.computed无法知道价格何时发生变化。避免这些错误的最好方法是始终使用knockout，而不是将它与jQuery混合以获取或设置值。

有趣的代码：

var Product = function (product, priceObservable)
{
    var self = this;
    // omitted code
    self.Total = ko.computed(function () {
        // Here I use the observable passed into the function
        return priceObservable() === 0 ? 0 : (priceObservable() * self.Quatity()).toFixed(2);
    });
};

var ProductModel = function (json) {
    var self = this;
    self.price = ko.observable(3000); // 3000 can be any initial value
    self.products = ko.observableArray(json.map(function (item) {
        return new Product(item, self.price);
    }));
};

var productViewModel = new ProductModel(json);
ko.applyBindings(productViewModel);

<input type="text" data-bind="value: price, valueUpdate: 'afterkeydown'" />

当我更改值输入时，KnockoutJS帮助我，列表项具有init不更改值

1 个答案: