淘汰赛：无法将数量变化与购物车中的总成本绑定

Question

我是Knockout JS的新手，正在从事一个简单的购物车。 用户输入商品的名称，价格和数量。

该信息将输出到“购物车中的物品”区域（一个可观察的数组），并在该区域下方显示总价格。

用户可以在“购物车中的物品”区域中更改数量，但更改不会改变总成本。

如何将“购物车中的物品”区域中的数量更改绑定到总成本？

先感谢您。

 var viewModel = { newItemName: ko.observable(), newItemPrice: ko.observable(0), newItemQuantity: ko.observable(1), addNewItem: function() { var newItem = { name: this.newItemName(), price: this.newItemPrice(), quantity: this.newItemQuantity() }; this.itemsInCart.push(newItem); this.newItemName(""); this.newItemPrice(0); this.newItemQuantity(1); }, removeItem: function() { viewModel.itemsInCart.remove(this); }, itemsInCart: ko.observableArray([{ newItemQuantity() }]) }; viewModel.addNewItemEnabled = ko.pureComputed(function() { var name = this.newItemName(), price = this.newItemPrice(), quantity = ko.observable(viewModel.newItemQuantity(1)); return name && name.length; }, viewModel); viewModel.getTotalCost = ko.computed(function() { var total = 0; arr = viewModel.itemsInCart(); for (i = 0; i < arr.length; i++) total += arr[i].price * arr[i].quantity; return total; }, viewModel); ko.applyBindings(viewModel); 

 <h1>Shopping Cart</h1> <hr /> <h3>Add New Item</h3> <label>Name:</label> <input type="text" data-bind="value: newItemName, valueUpdate: 'keyup'" /> <br /> <label>Unit Price:</label> <input type="number" min="0" step="0.25" data-bind="value: newItemPrice, valueUpdate: 'keyup'" /> <br /> <label>Quantity:</label> <input type="number" min="1" step="1" data-bind="value: newItemQuantity, valueUpdate: 'keyup'" /> <br /> <button data-bind="click: addNewItem, enable: addNewItemEnabled">Add Item</button> <hr /> <h3>Items in Cart</h3> <table> <thead> <tr> <th>Name</th> <th>Unit Price</th> <th>Quantity</th> </tr> </thead> <tbody data-bind="foreach: itemsInCart"> <tr> <td data-bind="text: name"></td> <td>$<span data-bind="text: price"></span> </td> <td> <input type="number" data-bind="value: quantity, valueUpdate: 'keyup'" /> </td> <td> <button data-bind="click: $parent.removeItem">remove</button> </td> </tr> </tbody> </table> <h3 data-bind="visible: getTotalCost() > 0 "> Your total will be $<span data-bind="text: getTotalCost"></span></h3> 

Answer 1

要记住的一点：在处理ko时， if something is not getting updated means it is not a observable

在这种情况下， var newItem = {您只是在分配值，而是应该将值分配给observable，如下所示

var newItem = {
            name: ko.observable(this.newItemName()),
            price: ko.observable(this.newItemPrice()),
            quantity: ko.observable(this.newItemQuantity())
    };

在这里修饰小提琴

以防万一，如果您正在寻找整洁干净的东西，最重要的是要寻找一个完整的ko请在此处检查此小提琴

Answer 2

您可以尝试查看Knockout文档的这一部分以获取指导： http : //learn.knockoutjs.com/#/?tutorial=collections 。

特别要注意的是，当每一行的用餐类型发生变化时，他们如何改变总附加费 。 您尝试对购物车中每个项目的数量执行的操作基本上是相同的。

另外，我注意到您将视图模型设置为变量。 我通常使我的功能，像这样：

function myViewModel(){
  // cool view model code here
}

然后，当您准备应用绑定时，请执行以下操作：

ko.applyBindings(new myViewModel());

我在使用Knockout时注意到的一件大事是，需要密切注意如何将括号与可观察数组和其他可绑定模型属性一起使用。 例如，两者之间有很大的不同

this.myObservableArray().push(item);

和

this.myObservableArray.push(item);

祝好运！