Question

我尝试使用Knockout渲染带有桌子的购物车。

我是Cart实体和CartItem实体：

var CartItem = function(product, qty){
    var self = this;
    self.product = ko.observable(product);
    self.qty = ko.observable(qty);
    self.title = ko.computed(...);
    self.unitPrice = ko.computed(function(){
        return self.product().price();
    });
    self.price = ko.computed(function(){
        return self.unitPrice()*self.qty();
    });
}

var Cart = function(){
    var self = this;
    self.items = ko.observableArray([]);
    self.total = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(ko.utils.arrayMap(self.items(), function(i){ return i.price() }), function(price){
            total += price;
        });
        return total;
    });
}

这是HTML：

<table class="table">
  <thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Qty</th>
        <th>Total</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">Total:</td>
      <td data-bind="price: cart.total"></td>
    </tr>
  </tfoot>
  <tbody data-bind="foreach: cart.items">
    <tr>
      <td data-bind="text: title"></td>
      <td data-bind="price: unitPrice"></td>
      <td data-bind="text: qty"></td>
      <td data-bind="price: price"></td>
    </tr>
  </tbody>
</table>

正如您所看到的，我已经创造了一个价格＆＃39;绑定以呈现价格，这是代码：

ko.bindingHandlers.price = {
    init :  ko.bindingHandlers.text.init,
    update: function(element, valueAccessor, allBindings, data, context) {
        var value = ko.unwrap(valueAccessor());
        var text =  '€ ' + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ");
        ko.bindingHandlers.text.update(element, function(){ return text; }, allBindings, data, context);
    }
};

自定义绑定＆＃39;价格＆＃39;适用于购物车项目但不适用于cart.total，不会呈现任何内容。

我已经在价格绑定中插入了console.log（元素），只是在购物车更新时打印购物车商品，我无法弄清楚原因。

使用替代＆＃39;文字：cart.total＆＃39;它有效。

Answer 1

在淘汰赛应用程序开始后，包含了自定义绑定的js。

我之前已经包含了自定义绑定，现在它可以正常工作。

Knockout：自定义绑定更新未在计算字段上触发

1 个答案: