数组 – 具有排序和Foreach数据绑定的Knockout Observable数组

我有一个对象数组,它们被连接到一个可拆卸的可观察数组中.我需要对这些数组应用排序,我遇到了一些有点令人困惑的行为.

我的第一次尝试涉及在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数组之间的区别,但我很难概念化行为发生变化的原因.我能够让它发挥作用,但我也很好奇什么是最佳实践.

谢谢你的帮助.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...