Sortowanie observableArray dla jednego z szablonów

Question

Mam następujący widok model:

function instance(id, FirstName){ 
    $.extend(this, { 
     id: ko.observable(id || ''), 
     FirstName: ko.observable(FirstName || '') 
    }); 
} 

Mam kilka wystąpień w observableArray:

ko.observableArray([new instance(...), new instance(...), ...] 

z następującym szablonem:

<ul data-bind='template: {name: "instanceTemplate", foreach: instances}'></ul> 

I kolejny szablon:

<ul data-bind='template: {name: "anotherInsTmpl", foreach: instances}'></ul> 

W pierwszym ul muszę uczynić szablony bez sortowania, w drugim renderowania klasyfikowane według FirstName.

Czy ktoś może wyjaśnić, jak to zrobić?

Answer 1

Jedną opcją byłoby dodanie dependObservable, które reprezentuje posortowaną tablicę. Wyglądałoby to mniej więcej tak:

viewModel.sortFunction = function(a, b) { 
     return a.FirstName().toLowerCase() > b.FirstName().toLowerCase() ? 1 : -1; 
}; 

viewModel.sortedInstances = ko.dependentObservable(function() { 
    return this.instances.slice().sort(this.sortFunction); 
}, viewModel); 

Porównanie wielkości wartości FirstName obserwowalne dla każdego elementu. Zwróć kopię tablicy (slice (0)), która jest posortowana (nie chcesz sortować prawdziwej tablicy).

Próbka tutaj: http://jsfiddle.net/rniemeyer/93Z8N/

Uwaga dotycząca Knockout wersja 2.0 i wyższa: ko.dependentObservable jest teraz ko.computed. Zobacz Dependent Observables