javascript - knockout : Unable to bind change in quantity to total cost in shopping cart

Question

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

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

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

如何将“购物车中的商品”区域中的数量变化与总成本绑定(bind)？

提前谢谢您。

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 时如果某些内容没有更新意味着它不是可观察的

在您的情况下 var newItem = { 您只是进行分配，而不是应该将值分配给可观察的值，如下所示

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

修改 fiddle here

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