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

我正在使用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",2000));
    carsviewmodel.cars.push(new car("car3","toyota",2000));
    carsviewmodel.cars.push(new car("car4",2000));
    carsviewmodel.cars.push(new car("car5",2000));        
    ko.applyBindings(carsviewmodel);
    //refresh the list to reapply the styles
    $('ul').listview('refresh');
}

我确信我遗失的东西非常愚蠢……

感谢您的时间.

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>