Automatisches aktualisieren der Ansicht der Liste auf ändern - knockoutjs & JQuery Mobile

Ich bin mit knockoutjs (ganz neu) mit JQuery Mobile. Ich habe eine listview, die ich binden gefilterten Ergebnisse zu. Nachdem ich das laden meiner Daten habe ich zum ersten mal aufrufen,

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

damit JQM zu restyle meiner Liste, das funktioniert Super.

Allerdings, wenn ich meine filter-Liste, es ist gerendert, und verliert den Stil wieder, und ich kann nicht herausfinden, wo Sie rufen Sie die Aktualisierung erneut.

Mein html ist wie folgt:

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

Mein Knockout JS ist:

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

Ich bin mir sicher, dass es etwas sehr albern, dass ich vermisst werde...

Vielen Dank für Ihre Zeit.

InformationsquelleAutor jimjim | 2011-08-30
Schreibe einen Kommentar