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())
    };

修改小提琴 here

万一你正在寻找整洁干净的，最重要的是一个完整的ko一个检查这个小提琴 here

Answer 2

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

特别要注意，当用餐类型在每一行上发生更改时，他们如何更改总附加费。这与您尝试处理购物车中每件商品的数量基本相同。

另外，我注意到您将视图模型设置为var。我通常会把它变成一个函数，就像这样：

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

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

ko.applyBindings(new myViewModel());

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

之间存在很大差异

this.myObservableArray().push(item);

和

this.myObservableArray.push(item);

祝你好运！

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

2 个答案: