Knockout-Kendo listview在valueHasMutated

Question

我正在开发一个项目，要求我将Kendo UI与Knockout.js一起用于移动应用程序，作为绑定此库的一种方式我正在使用knockout-kendo库，该应用程序包含一个简单的产品清单，包含每种产品和购物车的详细视图，但是我在更新购物车中的商品数量时遇到了一些问题。

我在我的应用程序中使用了knockout-kendo绑定，如下所示：

<div data-role="view" id="cart" data-title="Cart" data-layout="main-layout">
    <div data-bind="if: items().length == 0">No items currently in cart</div>
    <ul data-role="listview" data-style="inset" data-bind="kendoListView: { data: items, template: cartTemplate }"></ul>
</div>

模板是：

<script type="text/x-kendo-template" id="cartListTemplate">
    <div class="km-listview-link cart-item-container" data-id="#= Id #">
      <div class="product-image">
      <img src="#= ImageUrl #">
    </div>
    <div class="product-description">
      <p>#= Name #</p>
      <p>#= formattedPrice #</p>
      <p>#= quantity #</p>
    </div>
    <a data-role="button" data-icon="delete" class="km-primary" data-bind="click: removeItem">Delete</a>
  </div>
</script>

并且ViewModel是：

CartViewModel : function () {
        var self = this;
        globalKo.cartItems = self.items = ko.observableArray(JSON.parse(localStorage.getItem('cart')) || []);
        self.cartTemplate = kendo.template($('#cartListTemplate').html());
        self.removeItem = function (vm, event) {
            var element = $(event.target).parents('div.cart-item-container');
            productId = element.data('id');
            var cartItem = globalKo.cartItems().filter(function (element) {
                return element.Id == productId;
            })[0];
            if (cartItem.quantity > 1) {
                cartItem.quantity --;
            } else {
                self.items.remove(cartItem);
            }
            app.saveCart(); 
            self.items.valueHasMutated(); 
        }
    }

这一切显然都按预期工作，除了当数组值变异（调用valueHasMutated函数或者数组添加或删除了一个元素）时，按钮突然停止成为按钮并变成简单的文本，也不起作用，因为他们停止调用他们绑定的功能。从代码片段中可以看出，点击绑定是通过标记完成的，并且无法按预期工作。

值得注意的是，我正在调用valueHasMutated函数，否则视图不会更新购物车中的商品数量。

为了说明问题，这里有一些图片：

按下按钮之前

按下按钮

我不太明白为什么会发生这种情况，我猜它与Kendo UI有关，而不是与knockout.js有关。

我也做了一个小提示来证明这个问题，你可以找到它here

Answer 1

正如本文所指出的那样，并没有完全支持Kendo和Knockout集成（http://www.telerik.com/blogs/knockout-js-and-kendo-ui---a-potent-duo），因此在某些情况下必须完成一些工作。

首先尝试使用Knockout模板：

def Correct(totalPoints):
    print "Correct"
    totalPoints = totalPoints+1
    print "You have", totalPoints,"points"
    return totalPoints

totalPoints = Correct(totalPoints)

请注意＆＃39; a＆＃39;标签已更改为简单的按钮标签，将其绑定到剑道移动按钮（https://rniemeyer.github.io/knockout-kendo/web/Button.html）。然后必须通知视图使用Knockout模板而不是Kendo模板：

<script type="text/html" id="cartListTemplate">
  <div class="km-listview-link cart-item-container" data-id="text: Id">
    <div class="product-image">
      <img data-bind="attr:{src: ImageUrl}">
    </div>
    <div class="product-description">
      <p data-bind="text: Name"></p>
      <p data-bind="text: formattedPrice"></p>
      <p data-bind="text: quantity"></p>
    </div>
    <button data-icon="delete" class="km-big" data-bind="kendoMobileButton: $root.removeItem">Delete</button>
  </div>
</script>

最后，为了使删除功能正常工作，将其绑定到视图模型并接收当前项作为参数：

<div data-role="view" id="cart" data-title="Cart" data-layout="main-layout">
  <div data-bind="if: items().length == 0">No items currently in cart</div>
  <ul data-role="listview" data-style="inset" data-bind="kendoListView: { data: items, template: 'cartListTemplate', useKOTemplates: true }"></ul>
</div>

唯一需要注意的是，值已经变异，视图刷新有时会弄乱Kendo小部件，因此kendo knockout库使用指定data-bind属性中的角色的普通标记。 这是因为目前淘汰的kendo库不支持数据角色初始化，而是使用数据绑定初始化。

请在https://jsfiddle.net/aveze/Lykducos/

找到工作示例

Answer 2

您可以尝试使用knockout templates和knockout-kendo

• 在您的视图中

  <div data-role="view" id="cart" data-title="Cart" data-layout="main-layout">
      <div data-bind="if: !items().length === 0">No items currently in cart</div>
      <div data-bind="if: items().length"><p data-bind="text: items().length"></p><p> items currently in the cart</p></div>
      <ul data-role="listview" data-style="inset" data-bind="kendoListView: { data: items, template: 'cartListTemplate', useKOTemplates: true }"></ul>
  </div>
  

• 创建命名模板

  <script type="text/html" id="cartListTemplate">
  <li class="km-listview-link cart-item-container" data-bind="attr: {'id': Id}">
      <div class="product-image">
          <img data-bind="attr: {'src': ImageUrl}">>
      </div>
      <div class="product-description">
          <p data-bind="text: Name"></p>
          <p data-bind="text: formattedPrice"></p>
          <p data-bind="text: quantity"></p>            
      </div>
      <a data-role="button" data-icon="delete" class="km-primary" data-bind="click: $root.removeItem">Delete</a>
  </li>
  

• 通过拼接数组

  来删除项目

  this.removeItem = function (item) {
      const deleteIndex = this.items.findIndex(i => i.Id === item.Id)
      if (deleteIndex > -1) {
          this.items.splice(deleteIndex, 1)
      }
  }.bind(this)