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 Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Diesem Problem gekommen ist, bis auf die KO-Foren ein paar mal.
Eine option ist die Schaffung einer Bindung, die gebunden ist, um Ihre
filteredItems
und läuft das listview-refresh.Könnte es Aussehen:
Nun, Sie würde legen Sie diese auf den container (oder wirklich auf jedem element) und pass auf das beobachtbare, dass Sie wollen, dass es davon abhängen, wie:
data-bind="template: {name: 'myTemplate', foreach: filteredItems }, jqmRefreshList: filteredItems"
Kannst du die gesamte Arbeits-code auf jsfiddle ? Weil ich habe das gleiche Problem und ich habe versucht, Ihre Lösung, aber es funktioniert immer noch nicht.
[Edit] : Ok, es funktioniert für mich so :
Aufbauend auf den beiden vorherigen Antworten, hier ist etwas ein wenig mehr abgeschlossen. Es ermöglicht die Nutzung von containerless Bindung (z.B. foreach) in Kommentaren), und die Sohlen der Frage der refresh ausgelöst wird, nachdem die jQM-Seite-Lebenszyklus, die durch die Handhabung von Ausnahmen, anstatt eine timeout:
Gibt es eine komplette Beispiel auf meinem blog. Hoffe, das hilft!