Сортировка наблюдаемого массива для одного из шаблонов

У меня есть следующая модель представления:

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

У меня есть несколько экземпляров в наблюдаемом массиве:

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

Со следующим шаблоном:

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

И еще один шаблон:

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

В первом ul мне нужно отображать шаблоны без сортировки, во втором - рендеринг, отсортированный по первому имени.

Может кто-нибудь объяснить, как это сделать?

ОТВЕТЫ

Ответ 1

Один из вариантов заключается в добавлении зависимого объекта, который представляет отсортированный массив. Это выглядело бы так:

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

Итак, сделайте нечувствительное к регистру сравнение значения FirstName, наблюдаемого для каждого элемента. Верните копию массива (срез (0)), который отсортирован (не хотите сортировать реальный массив).

Пример здесь: http://jsfiddle.net/rniemeyer/93Z8N/

Примечание относительно версии нокаута версии 2.0 и выше: ko.dependentObservable теперь ko.computed. См. Зависимые наблюдения