挖空:无法将数量变化与购物车中的总成本绑定

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

本文关键字：购物车 绑定 总成本 变化 挖空      更新时间：2023-09-26

我是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>

要

记住的一点：在处理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())
    };

修改小提琴在这里

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

您可以尝试查看淘汰文档的这一部分以获取指导： 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);

祝你好运！

相关文章：