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中，并且此值添加价格当前值。< / p>

我该怎么做？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: