我正在使用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论坛上出现了几次.
一种选择是创建绑定到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>
