javascript - 取消选中大型 (1000) 数据集上的复选框时，Knockout 速度很慢

Question

我正在使用这段代码来检查我 View 中的所有复选框。

var checked = self.includeAllInSoundscript();
var contents = self.filterContents(self.getFilters());
for (var i = 0; i < contents.length; i++) {
   contents[i].includeInSoundscript(checked);
}
return true;

复选框

<input type="checkbox" data-bind="checked: includeInSoundscript" title="sometitle" />

内容是这样的:

(function (ko) {
ContentViewModel = function (data) {
    this.orderId = data.orderId;
    this.contentReferenceId = ko.observable(data.contentReferenceId);
    this.includeInSoundscript = ko.observable();
});

这是过滤方法:

self.getFilters = function() {
  var filterOrders = $.grep(self.orders(), function (order) {
    return (order.usedInfilter());
  });
  var filterLocations = $.grep(self.locations(), function (location)      {
    return (location.usedInfilter());
  });
  return { orders: filterOrders, locations: filterLocations };
};
self.filterContents = function (filter) {
  var filteredArray = self.contents();
  if (filter.orders.length > 0) {
      filteredArray = $.grep(filteredArray, function (content) {
        return $.grep(filter.orders, function (order) {
          return (order.orderId == content.orderId);
        }).length > 0;
      });
  }
  if (filter.locations.length > 0) {
      filteredArray = $.grep(filteredArray, function (content) {
                         return $.grep(filter.locations, function (location) {
                           return $.inArray(location.location, content.orderedFrom().split('/')) != -1;
  }).length > 0;
});
}
 return filteredArray;
};

选中所有复选框很快，但是当我取消选中时，最多可能需要 20 秒。奇怪的是，当过滤结果很小的时候，它仍然需要更长的时间，即使过滤结果大约是 40 个，总共 1000 个。

复选框在表格中，使用 data-bind="foreach: contents"绑定(bind)

我现在已经删除了一些“不必要的”可观察对象，对于最有可能不会改变的属性，它的行为会稍微好一些，但仍然很慢，尤其是在 firefox 中。最大的问题是，为什么这种行为只出现在取消选中的复选框上，而不出现在过滤、排序、检查等方面。

注意:它只是取消选中复选框，基本上当“checked”为false时，否则速度很快。

编辑:我一次只显示 50 个项目，但我正在选中/取消选中所有过滤的项目。这样，我就可以控制发布到服务器的内容。

Answer 1

这就是我在这个场景中使用的。也许它会对你有所帮助。

checked 绑定(bind)可以处理选定项目的数组，但只支持在数组中存储字符串。我使用支持在数组中存储对象的自定义绑定(bind)(就像 selectedOptions 那样):

ko.bindingHandlers.checkedInArray = {
    init: function (element, valueAccessor) {
        ko.utils.registerEventHandler(element, "click", function() {
            var options = ko.utils.unwrapObservable(valueAccessor()),
                array = options.array, // don't unwrap array because we want to update the observable array itself
                value = ko.utils.unwrapObservable(options.value),
                checked = element.checked;
            ko.utils.addOrRemoveItem(array, value, checked);
        });
    },
    update: function (element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()),
            array = ko.utils.unwrapObservable(options.array),
            value = ko.utils.unwrapObservable(options.value);

        element.checked = ko.utils.arrayIndexOf(array, value) >= 0;
    }
};

每个复选框的绑定(bind)如下所示:

<input type="checkbox" data-bind="checkedInArray: { array: $parent.selectedItems, value: $data }" />

用于选择所有项目的复选框使用普通的 checked 绑定(bind)并附加到一个可写的计算可观察对象:

this.allItemsSelected = ko.computed({
    read: function() {
        return this.selectedItems().length === this.items().length;
    },
    write: function(value) {
        this.selectedItems(value ? this.items.slice(0) : [] );
    },
    owner: this
});

示例:http://jsfiddle.net/mbest/L3LeD/

更新:Knockout 3.0.0 引入了 checkedValue 绑定(bind)选项，使上述自定义绑定(bind)变得不必要。您现在可以像这样绑定(bind)复选框:

<input type="checkbox" data-bind="checked: $parent.selectedItems, checkedValue: $data" />

示例:http://jsfiddle.net/mbest/RLLX6/