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中，我需要渲染模板而不用排序，在第二个渲染中按FirstName排序。

任何人都可以解释怎么做吗？

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））的副本（不想对实际数组进行排序）。

此处示例：http://jsfiddle.net/rniemeyer/93Z8N/

关于Knockout 2.0及更高版本的注意事项：ko.dependentObservable现在是ko.computed。见Dependent Observables

为其中一个模板排序observableArray

1 个答案: