如何更新购物车总价中的值？

Question

我正在使用 jQuery Mobile 设计购物车移动应用程序。我正在使用单页架构在页面之间进行导航。每个页面的标题中都有一个购物车图标，其中显示了当前购物篮的总价格。我使用了 KnockoutJS，在每个页面的顶部，我都将购物车总价显示为：

<a href="#cartBox" data-icon="myapp-settings" data-theme="b" data-role="button"><span data-bind="text: price"></span>  </a>

我在每个页眉部分都使用了上述行。

这是我用来在每个地方显示价格值的脚本：

function cartPrice() {
    this.price = ko.observable(0.00);
}
ko.applyBindings(new cartPrice());

到处都有产品的列表视图，现在我希望每当用户单击列表视图项目时，价格会更新为隐藏在特定 li 中的输入类型中给出的值，并且该值添加到价格当前值。

我该怎么做？

Answer 1

您应该在一个根视图模型中聚合CartPrice 和列表视图的视图模型。例如。像这样：

function CartPrice() {
  this.price = ko.observable(0.00);
}

function ListViewModel() {
  var self = this, i = 1;
  
  self.items = ko.observableArray([]);
  
  self.addItem = function() {
    self.items.push({
      name: "New item " + (++i),
      price: +(Math.random() * 2.5 + 1.0).toFixed(2)
    });
  }
}

function RootViewModel() {
  var self = this;
  
  self.cartPriceVm = new CartPrice();
  self.listVm = new ListViewModel();
  
  self.listVm.items.subscribe(function() {
    var newTotal = self.listVm.items().reduce(function(a,b) { return a + b.price; }, 0);
    //console.log(newTotal);
    self.cartPriceVm.price(newTotal);
  });
}

var vm = new RootViewModel();

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko with: cartPriceVm -->
Total price: $<strong data-bind="text: price"></strong>.
<!-- /ko -->

<!-- ko with: listVm -->
<ul data-bind="foreach: items">
  <li>
    <span data-bind="text: name"></span> -
    $<span data-bind="text: price"></span>
  </li>
</ul>
<button data-bind="click: addItem">Add Item</button>
<!-- /ko -->