使用嵌套循環更新ViewModel剔除

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（combatants，'swords'），我將如何使自動分類工作？ 在這個小提琴（ http://jsfiddle.net/4Lhwerst/2/ ）中，我希望事件按殺死次數排序，然后按時間排序。 是否可以在不創建另一個observableArray的情況下完成客戶端的多級排序？

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);
    }));
};

對於數據的重新表示或重新組合，應使用computed的（或pureComputed ）。 將任何數據項存儲在一個地方。

Answer 2

您正在進入基礎戰斗人員陣列，因此繞過了變更跟蹤。 完成后，請刪除括號（d.combatants.push）或調用valueHasMutated。

您需要：

    if(d.name() == combatant.division){
        d.combatants.push({name: combatant.name,
                    ID: combatant.ID,
                    swords:{points: 0, time:'none', kills: 0}
                    });
    }

要么：

    if(d.name() == combatant.division){
        d.combatants().push({name: combatant.name,
                    ID: combatant.ID,
                    swords:{points: 0, time:'none', kills: 0}
                    });
        d.combatants.valueHasMutated();
    }