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

Question

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

该信息输出到 'Items in Cart' 区域，一个可观察数组，总价显示在该区域下方。

用户可以在 'Items in Cart' 区域更改数量，但该更改不会更改总成本。

如何将 'Items in Cart' 区域的数量变化绑定到总成本？

提前谢谢你。

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

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

尤其要注意当每行的 Meal 类型发生变化时，他们如何使 Total surcharge 发生变化。这与您尝试对购物车中每件商品的数量做的事情基本相同。

此外，我注意到您将视图模型设置为 var。我通常让我的一个函数，像这样：

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

然后，当您准备好应用绑定时，您可以这样做：

ko.applyBindings(new myViewModel());

我在使用 Knockout 时注意到的一件大事是，需要非常密切地注意括号是如何与可观察数组和其他可绑定模型属性一起使用的。例如，

之间有很大的区别

this.myObservableArray().push(item);

和

this.myObservableArray.push(item);

祝你好运！

Answer 2

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

在你的情况下 var newItem = { 你只是简单地分配而不是你应该将值分配给可观察到的值，如下所示

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

修改fiddlehere

以防万一，如果您正在寻找整洁干净的，最重要的是完整的ko，请查看此 fiddle here

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

Knockout: Unable to bind change in quantity to total cost in shopping cart

javascript

knockout.js