当我更改值输入时，KnockoutJS 帮助我，列表项初始化不更改值

Question

我有一个包含产品列表 {Name,Quatity,Price,Total} 的网格。我用值 0 初始化 <input id='Price'>， 当更改一个产品的数量时，自动计算的总计 = 数量 * 价格，Price = $('#Price').val()：

如果网格初始化为空，我可以正常工作，但是当我使用某些产品初始化网格并将 <input id='Price'> 设置为 0 时，计算不起作用。

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

Answer 1

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

我改了一堆东西，因为一开始我找不到错误，但是当我打开控制台时，我意识到有很多语法错误等等。

我更改的主要内容是价格的输入字段：我将其绑定到添加到视图模型中的可观察对象，以便您的计算可以响应其中的更改。为此，必须将 price-observable 传递给 Product 的构造函数。

我还对您的代码进行了一些清理，希望使其更具可读性和更易于理解。

问题是 ko.computed 只响应它使用的 observables 的变化（依赖）。因为您使用 jQuery 从输入字段中获取值，所以 ko.computed 无法知道价格何时发生变化。避免这些错误的最佳方法是始终使用敲除，而不是将其与 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'" />