在更改时自动刷新列表视图 - knockoutjs和JQuery Mobile

Question

我正在使用jout Mobile的knockoutjs(非常新的).我有一个listview,我将筛选结果绑定到.我第一次打电话后加载数据

$('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并运行listview刷新.

它可能看起来像:

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

现在,您将它放在容器上(或实际上放在任何元素上)并传入您希望它依赖的observable:

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