使用嵌套循环更新ViewModel knockout

Question

这可能不是完成任务的完全理想的优化方式.关于任何更好的方法,我愿意接受建议.到目前为止,负载在性能方面表现良好.

我有我的淘汰应用程序通过ajax加载工作.在绑定调用中,我有一个嵌套循环,其中包含一个根据设置值更新点的函数.

当我尝试添加新项目时,不会抛出任何错误,但UI不会更新,我似乎无法弄清楚原因.

这是我想要做的事情的小提琴. http://jsfiddle.net/hjchvawr/2/

addCombatant方法确实有效,但无论出于何种原因,表都不会重新绑定.您可以看到VM json中的附加值已输出到控制台.

self.addCombatant = function(combatant){
        ko.utils.arrayForEach(self.divisions(), function(d){
            if(d.name() == combatant.division){
                d.combatants().push({name: combatant.name,
                            ID: combatant.ID,
                            swords:{points: 0, time:'none', kills: 0}
                            });
            }
       console.log(ko.toJSON(self.divisions));
    }
)}.bind(this);

编辑:

我已经应用了下面建议的一些更新,并添加了另一个列表进行排序.它绑定和更新然而,当我添加一个战士时,它只绑定到一个事件并且排序关闭.如果我不能使用sortDivision(战斗员,'剑'),我该如何进行自动分类？在这个小提琴(http://jsfiddle.net/4Lhwerst/2/)中,我希望事件按杀戮排序,然后是时间.是否有可能在不创建另一个observeableArray的情况下完成客户端的多级排序？

Answer 1

这是表格中的foreach绑定.

    <!-- ko foreach: $root.sortDivision(combatants, 'swords') -->

sortDivision 被定义为:

self.sortDivision = function (div, evt) {
    return div.sortBy(evt, 'time', 'asc').sortBy(evt, 'kills', 'desc');
};

你的sortBy功能创造了一个新的observableArray.这与observableArray被推到的不一样.

ko.observableArray.fn.sortBy = function (evt, fld, direction) {
    var isdesc = direction && direction.toLowerCase() == 'desc';
    return ko.observableArray(this.sort(function (a, b) {
        a = ko.unwrap(evt ? a[evt][fld]() : a[fld]());
        b = ko.unwrap(evt ? b[evt][fld]() : b[fld]());
        return (a == b ? 0 : a < b ? -1 : 1) * (isdesc ? -1 : 1);
    }));
};

您应该将computeds(或pureComputeds)用于重新呈现或重新组合数据的事物.将任何数据项存储在一个位置.