一次更新大量可观测数据的性能淘汰技巧

Question

我正在使用这个计算，正如你可以想象的，当我点击selectAll时，所有的复选框都被选中(一个接一个)，我认为可以进行优化，这样所有的复选框都会被选中，然后重新评估模型，但我不确定这是不可能的。

self.selectAllExpired = ko.computed({
                    read: function() {
                        return ko.utils.arrayFirst(self.paymentOrdersExpired(), function(order) {
                            return !order.isSelected();
                        }) == null;
                    },
                    write: function(value) {
                        ko.utils.arrayForEach(self.paymentOrdersExpired(), function(order) {
                            order.isSelected(value);
                        });
                    },
                    owner:this
                });

Answer 1

对于这种类型的场景，节流是一个很好的选择：http://knockoutjs.com/documentation/throttle-extender.html

即使使用添加到计算中的.extend({ throttle: 1 })，也会防止计算在您选中每个框时触发多个更新。

Answer 2

下面是一个算法，当一个项的选择发生变化时，我用它来避免重新检查整个数组：

function getIsAllSelectedComputed(arrayObservable) {
    var unSelectedCount = ko.observable(), arrayVersion = 0;
    function updateSelectedCheck(arrayValue) {
        ++arrayVersion; // Whenever the array changes, increment the version
        var initialUnSelectedCount = 0;
        ko.utils.arrayForEach(arrayValue, function(item) {
            var previousValue = item.isSelected();
            if (!previousValue)
                initialUnSelectedCount++;
            if (!item._isSelectedSubVersion) {
                item.isSelected.subscribe(function(latestValue) {
                    if (item._isSelectedSubVersion === arrayVersion) {
                        // Only update the unSelectedCount if the "truthiness" has changed
                        if (Boolean(previousValue) ^ Boolean(latestValue))
                            unSelectedCount(unSelectedCount() + (latestValue ? -1 : 1));
                        previousValue = latestValue;
                    }
                });
            }
            item._isSelectedSubVersion = arrayVersion;
        });
        unSelectedCount(initialUnSelectedCount);
    }
    updateSelectedCheck(arrayObservable());
    arrayObservable.subscribe(updateSelectedCheck);

    return ko.computed({
        read: function() {
            return (unSelectedCount() === 0);
        },
        write: function(value) {
            ko.utils.arrayForEach(arrayObservable(), function(item) {
                item.isSelected(value);
            });
        }
    });    
}

示例：http://jsfiddle.net/mbest/ssEqj/