我有一个对象数组,它们连接到一个 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 数组上的操作之间的差异有关,但我很难概念化为什么行为会发生变化。我能够让它工作,但我也很好奇什么被认为是最佳实践。
感谢您的帮助。 :)
最佳答案
KO 实际上不推荐在 View 中使用排序的问题,因为
使用这种方法,observableArray.sort 不会建立对数组的依赖,因此绑定(bind)不会更新。
因此,如果您想让它发挥作用,可以使用
items.slice(0).sort()
更详细的内容请参见
https://github.com/knockout/knockout/issues/1380
fiddle :http://jsfiddle.net/mbest/6dmAn/
关于arrays - 具有排序和 Foreach 数据绑定(bind)的 knockout 可观察数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21268054/