淘汰赛 - 使用foreach和排序

Question

我在组合foreach绑定时遇到了麻烦.我有一个列表绑定如下:

<article data-bind="foreach: widgets">  

小部件是一个简单的可观察数组:

var widgets= ko.observableArray();

这很好地给了我一个我的"小部件"列表.如果我将新的"小部件"添加到此列表中,则它将通过数据绑定动态显示在列表中.

但是,只要我向数组添加排序:

<article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() < right.order() ? -1 : 1); })">

然后新添加的小部件不再出现在我的列表中 - 除非我重新加载页面.(此时排序很有效 - 如果我更新了我正在排序的"order"字段,那么列表中的项目将被动态重新排序).

如何通过动态更新我的可观察数组中的新项目来进行排序？

我正在使用Breezejs来检索我的数据,但我不认为这会影响这种情况.

Answer 1

所述observableArray.sort排序底层("规则")阵列,而不是一个返回 observableArray,这就是为什么在UI上未示出的变化.

要更新排序和UI,您需要创建一个ko.computed排序并使用绑定中的计算.因为ko.computed会听取widgets更改并重新计算排序.

var widgets= ko.observableArray();

var sortedWidgets = ko.computed(function() {
   return widgets().sort(function (left, right) { 
        return left.order() == right.order() ? 
             0 : 
             (left.order() < right.order() ? -1 : 1); 
   });
});

然后你可以绑定它:

<article data-bind="foreach: sortedWidgets" />