在一个大的（1000）数据集取消选中复选框，当淘汰赛是缓慢的(Knockout is slow wh

我使用此代码，检查我的看法所有复选框。

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秒。奇怪的是，当filetered结果是小，但它仍然需要更长的时间，即使过滤后的结果为约40％，从总集的1000。

该复选框是在表中，使用数据绑定绑定=“的foreach：内容”

我现在已经删除了一些“unescessary”可观的，因为这极有可能不会改变性质，则表现略好，但仍然很慢，尤其是在Firefox浏览器。最大的问题是，为什么这种行为只有在取消选中复选框，而不是筛选，排序，检查等。

注意：它只有取消选中的复选框，基本上在“检查”是假的，否则它的快。

编辑：我每次只显示50个项目，但我选中/取消选中所有过滤项目。这一点，所以，我在CONTROLL张贴到服务器的内容。

Answer 1:

这是我使用的这个场景。也许这会帮助你。

的checked结合可以与选择的项目的阵列的工作，但只支持存储阵列中的字符串。我使用自定义的结合，支持存储阵列中的对象（如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;
    }
};

每个复选框的结合则是这样的：

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

用于选择所有项目的复选框使用正常checked结合和连接到计算观察到一个可写的：

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/

更新：淘汰赛3.0.0推出checkedValue绑定选项，使得上面的自定义绑定不必要的。现在，您可以绑定像这样的复选框：

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

例如： http://jsfiddle.net/mbest/RLLX6/

Answer 2:

如果你使用jQuery选中/取消选中所有的箱子恰好表现什么？

$('#tableId').find('input[type=checkbox]').prop('checked', checked);

或者，你可以检查所有的复选框，当你显示它们，而不是做他们都一气呵成？

此外，您可以尝试使用knockout.utils用于过滤观察到的阵列的方法，我很想看看是否有任何存在性能差异。

var filteredArray = ko.utils.arrayFilter(this.items(), function(item) {
        return ko.utils.stringStartsWith(item.name().toLowerCase(), filter);
    });

还存在用于遍历的阵列，并且每个处理元件的方法：

ko.utils.arrayForEach(this.items(), function(item) {
    var value = parseFloat(item.priceWithTax());
    if (!isNaN(value)) {
        total += value;
    }
});

同样，我不知道这是否会与性能方面提供帮助或没有，但我认为这是一个好一点的可爱，聪明！

文章来源: Knockout is slow when unchecking checkboxes on a large (1000) dataset