Question

我在组合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); })">

然后新添加的小部件不再出现在我的列表中 - 除非我重新加载页面。（此时排序很有效 - 如果我更新了我正在排序的“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" />

淘汰赛 - 使用foreach和排序

1 个答案: