排序的observableArray的模板之一

Question

我有以下視圖模型：

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

我有一個observableArray一些實例：

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我需要呈現模板沒有排序，在第二個由姓渲染排序。

任何人都可以解釋如何做到這一點？

Answer 1

一個選項是添加一個dependentObservable，它代表排序的數組。它看起來像這樣：

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 observable的值。返回已排序數組的副本（slice（0））（不想對實數組排序）。

樣品在這裏：ko.dependentObservable現在ko.computed：http://jsfiddle.net/rniemeyer/93Z8N/

關於淘汰賽2.0版和更大的注意。見Dependent Observables