我有一个对象数组,它们被连接到一个可拆卸的可观察数组中.我需要对这些数组应用排序,我遇到了一些有点令人困惑的行为.
我的第一次尝试涉及在foreach数据绑定中应用排序.
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) })“> 基于我发现的一些SO答案,我最终为排序的数组创建了一个计算的observable.
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);
});
});
这也有效.而且我甚至不需要数据绑定到计算的observable,因为它立即执行.我可以适当地推送和删除数组项和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,但数据未被排序.
我认为这些差异与淘汰依赖性跟踪有关,以及在可观察数组上操作与其下面的本机JavaScript数组之间的区别,但我很难概念化行为发生变化的原因.我能够让它发挥作用,但我也很好奇什么是最佳实践.
谢谢你的帮助.
