listview - 使用 foreach 渲染创建自定义敲除绑定（用于 jquery 移动列表视图）

Question

使用 jquerymobile 和淘汰赛，我正在尝试创建一个自定义绑定，如下所示

<ul data-bind="listview: observablearray">
    <li data-bind="text: text"></li>
</ul>

listview 绑定首先会像 foreach 绑定一样起作用，然后将 $(element).listview() 应用于它（或 $(element).listview('refresh') 在更新时）。

我尝试执行以下操作来天真地模仿 foreach 绑定：

ko.bindingHandlers.listview = {
  init: function (element, valueAccessor) {
    var listview = $(element);
    listview.listview();
  },
  update: function (element, valueAccessor) {
    var listview = $(element);
    setTimeout(function () {
      listview.html('');
      var items = valueAccessor().list;
      var link = valueAccessor().link;
      var text = valueAccessor().text;
      var icon = valueAccessor().icon;
      $.each(ko.utils.unwrapObservable(items) || [], function (i, item) {
        var li = $('<li></li>').css({
          height: '44px'
        })
        var a;
        if (link) {
          a = $('<a href="#"></a>').click(function () {
            link(item)
          });
          li.append(a);
        }
        if (icon) {
          (a || li).append($('<img />').attr('src', icon(item)).addClass('ui-li-icon'));
        }
        if (text) {
          (a || li).append($('<span></span>').text(item[text]));
        }
        listview.append(li);
      });
      listview.listview('refresh')
    }, 0);
  }
};

不幸的是，这不仅是一个不使用模板的糟糕实现，而且在 init 上也出现了错误：

未捕获的类型错误：无法读取未定义的属性“jQuery19101983379740267992”

提前致谢！

Answer 1

您可以从绑定中调用内部敲除绑定。

在您的情况下，这应该可以。

ko.bindingHandlers.listview = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var res = ko.bindingHandlers.foreach.init(element, valueAccessor()['listview']);
        $(element).listview();
        return res;
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var res = ko.bindingHandlers.foreach.update(element, valueAccessor()['listview'], allBindingsAccessor, viewModel, bindingContext);
        $(element).listview('refresh');
        return res;
    }
};

自己渲染模板是一个很大的挑战，最好使用内部的“模板”绑定。'foreach' 绑定也是如此。查看 knockoutjs 代码以了解它是如何完成的。

Answer 2

对我来说，使用动态 jQueryMobile 列表视图的最快和优雅的方式是订阅模型更改，如下所示：

viewModel.products.subscribe(function() {
    jQuery("#productsList").listview("refresh");  
});