arrays - 具有排序和 Foreach 数据绑定(bind)的 knockout 可观察数组

Question

我有一个对象数组，它们连接到一个 knockout 可观察数组中。我需要对这些数组应用排序，但遇到了一些令人困惑的行为。

我的第一次尝试涉及在 foreach 数据绑定(bind)中应用排序。
http://jsfiddle.net/wnfXV/

<ul data-bind="foreach: people.sort(function(l,r) { return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1)})">

这会执行正确的排序，但我失去了从数组中动态添加/删除元素以及更新 DOM 的能力。

如果我添加一组括号来访问底层 JavaScript 数组，一切都会正常。

<ul data-bind="foreach: people().sort(function(l,r) { return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1)})">

根据我发现的一些答案，我最终为排序数组创建了一个计算的可观察值。 http://jsfiddle.net/wnfXV/2/

self.sortedPeople = ko.computed(function() {
    return self.people().sort(function(l,r) {
        return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1);
    });
});

这也有效。我什至不需要将数据绑定(bind)到计算的可观察量，因为它是立即执行的。我可以推送和删除数组项，并且 DOM 会相应更新。

但是，如果我将代码更改为:

self.sortedPeople = ko.computed(function() {
    return self.people.sort(function(l,r) {
        return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1);
    });
});

现在，我可以将项目推送到数组并且 DOM 更新，但数据未排序。

我认为这些差异与 knockout 依赖跟踪以及可观察数组和其下面的 native JavaScript 数组上的操作之间的差异有关，但我很难概念化为什么行为会发生变化。我能够让它工作，但我也很好奇什么被认为是最佳实践。

感谢您的帮助。 :)

Answer 1

KO 实际上不推荐在 View 中使用排序的问题，因为使用这种方法，observableArray.sort 不会建立对数组的依赖，因此绑定(bind)不会更新。

因此，如果您想让它发挥作用，可以使用

items.slice(0).sort()

更详细的内容请参见
https://github.com/knockout/knockout/issues/1380

fiddle :http://jsfiddle.net/mbest/6dmAn/