自动刷新的变化列表视图 - knockoutjs＆安培; jQuery Mobile的 [英] Automatically refresh list view on change - knockoutjs & JQuery Mobile

问题描述

我使用使用jQuery Mobile knockoutjs（很新的话）。我有我绑定筛选结果到ListView。我打开我的资料后，我第一次打电话给

I am using knockoutjs (very new to it) with JQuery Mobile. I have a listview which I bind filtered results to. After I load my data the first time I have to call

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

为了JQM到restyle我的名单，这个伟大工程。

in order for JQM to restyle my list, this works great.

然而，当我筛选我的名单，这是重新呈现，再次失去了风格，我想不出哪里再次调用刷新。

However when I filter my list, it is rerendered and looses the style again and I can't figure out where to call the refresh again.

我的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 }" />

我淘汰赛JS是：

My Knockout JS is:

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');
}

我相信，有一些很无聊的，我很想念...

I am sure that there is something very silly that I am missing...

感谢您的时间。

推荐答案

这个问题已经上来就KO论坛上几次。

This issue has come up on the KO forums a few times.

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

One option is to create a binding that is bound to your filteredItems and runs the listview refresh.

这可能看起来像：

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

现在，你可以把这个容器上（或者任何其他元素）和观察到的传递您希望它取决于如：

Now, you would place this on the container (or really on any element) and pass in the observable that you want it to depend on like:

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

这篇关于自动刷新的变化列表视图 - knockoutjs＆安培; jQuery Mobile的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！