20

我无法将 foreach 绑定与排序结合起来。我有一个像这样绑定的列表：

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

Widgets 是一个简单的 obvservable 数组：

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

然后新添加的小部件不再出现在我的列表中 - 除非我重新加载页面。（此时排序工作得很好——如果我更新我正在排序的“订单”字段，那么我的列表中的项目将被动态重新排序）。

我怎样才能让排序与我的可观察数组中的新项目的动态更新很好地配合？

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

4

1 回答 1

36

返回已排序的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" />
于 2013-06-03T04:57:07.843 回答