更改时自动刷新列表视图 - knockoutjs & jQuery 移动版

Question

我正在将 knockoutjs（对它来说很新）与 JQuery Mobile 一起使用。我有一个将过滤结果绑定到的列表视图。第一次加载数据后，我必须调用

$('ul').listview('refresh');

JQM 来重新设计我的列表，这非常有效。

但是，当我过滤列表时，它会重新渲染并再次失去样式，并且我无法弄清楚在哪里再次调用刷新。

我的 html 如下：

<p>Filter: <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /></p>
     <ul data-role="listview" data-theme="g" data-bind="template: {name: 'myTemplate', foreach: filteredItems }" />

我的 Knockout JS 是：

var car = function (name, make, year) {
    this.name = name;
    this.make = make;
    this.year = year;
}

var carsViewModel = {
    cars: ko.observableArray([]),
    filter: ko.observable()
};

//filter the items using the filter text
carsViewModel.filteredItems = ko.dependentObservable(function () {
    var filter = this.filter();
    if (!filter) {
        return this.cars();
    } else {
        return ko.utils.arrayFilter(this.cars(), function (item) {
            return item.make == filter;
        });
    }
}, carsViewModel);

function init() {
    carsViewModel.cars.push(new car("car1", "bmw", 2000));
    carsViewModel.cars.push(new car("car2", "bmw", 2000));
    carsViewModel.cars.push(new car("car3", "toyota", 2000));
    carsViewModel.cars.push(new car("car4", "toyota", 2000));
    carsViewModel.cars.push(new car("car5", "toyota", 2000));        
    ko.applyBindings(carsViewModel);
    //refresh the list to reapply the styles
    $('ul').listview('refresh');
}

我确信我错过了一些非常愚蠢的东西...

谢谢您的时间。

Answer 1

这个问题已经在 KO 论坛上出现过几次了。

一种选择是创建一个绑定到您的 filteredItems 的绑定并运行列表视图刷新。

它可能看起来像：

   ko.bindingHandlers.jqmRefreshList = { 
     update: function(element, valueAccessor) { 
       ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency
       $(element).listview("refresh"); 
     } 
   };

现在，您可以将其放置在容器上（或者实际上放置在任何元素上）并传入您希望它依赖的可观察对象，例如：

<ul data-bind="jqmRefreshList: filteredItems"></ul>

Answer 2

您可以在 jsfiddle 上发布完整的工作代码吗？因为我遇到了同样的问题，并且尝试了您的解决方案，但仍然不起作用。

[编辑]：好的，它对我来说效果很好：

ko.bindingHandlers.jqmRefreshList = {
    update: function (element, valueAccessor) {

        ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency
        setTimeout(function () { //To make sure the refresh fires after the DOM is updated 
            $(element).listview();
            $(element).listview('refresh');
        }, 0);
    }
};

Answer 3

基于前两个答案，这里有一些更完整的内容。 并通过处理异常而不是超时来解决 jQM 页面生命周期后触发刷新的问题：

ko.virtualElements.allowedBindings.updateListviewOnChange = true;
ko.bindingHandlers.updateListviewOnChange = {
  update: function (element, valueAccessor) {
    ko.utils.unwrapObservable(valueAccessor());  //grab dependency

    var listview = $(element).parents()
                             .andSelf()
                             .filter("[data-role='listview']");

    if (listview) {
      try {
        $(listview).listview('refresh');
      } catch (e) {
        // if the listview is not initialised, the above call with throw an exception
        // there doe snot appear to be any way to easily test for this state, so
        // we just swallow the exception here.
      }
    }
  }
};

它允许您使用无容器绑定（即注释中的 foreach） ， co.uk/blog/colin/2012/10/integrating-knockout-and-jquerymobile/" rel="nofollow">我的博客上的完整工作示例。希望有帮助！