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

Question

我正在使用jQuery Mobile设计购物车移动应用程序。 我正在使用一个页面结构在页面之间进行导航。 每个页面的标题中都有一个CART图标，其中显示了购物篮的当前总价。 我已经使用了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());

现在到处都有产品的列表视图，现在我希望每当用户单击listview项目时，价格就会用隐藏在特定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 -->