foreach 大选择减慢了 knockoutjs 数据绑定答案

【问题标题】：foreach large select slowing down knockoutjs databindingforeach 大选择减慢了 knockoutjs 数据绑定
【发布时间】：2014-12-31 23:04:04
【问题描述】：

我的问题

我有一个表，它加载了 相同的选择，它为检索到的每个数据项提供了数百个选项。在数据绑定之前，我检索 select 的数据并将其存储在 JavaScript 变量中。问题在于，由于选项太多，这些选项需要 10 多秒才能填充一个包含 200 多个项目的数据集。

我已经确定这是问题所在

我发现通过删除选择数据绑定运行得非常快，所以我确定这是我的问题。

我的问题

我还能做些什么来加快这个过程？

我的实现

<table id="reportList">
    <tbody data-bind='foreach: reportList'>
       <tr>
          <td>
              <select class="itemSelect" data-bind="options: $root.selectItemIDOptions,
                                                    value:ItemID, optionsValue: 'ItemID',
                                                    optionsText: 'SupplierItemID',
                                                    optionsCaption: 'Select Item'"  />

          </td>
          <td data-bind="text: Description"></td>
       </tr>

我的视图模型

function ReportViewModel(reportData) {

  //GlobalItemList already has all of the select options at this point ready for databinding
  self.selectItemIDOptions = GlobalItemList;
  self.reportList = ko.observableArray();
  var Shrinkage = reportData.ShrinkageList;
  var rowArr = self.reportList();
  for (var i = 0; i < Shrinkage.length; i++) {
    rowArr.push(new ReportRow(Shrinkage[i].ItemID, Shrinkage[i].Description);
  }

   self.reportList.valueHasMutated();
}

行类

function ReportRow(ItemID, Description) {

  var self = this;
  self.ItemID = ko.observable(ItemID);
  self.Description = ko.observable(Description);
}

【问题讨论】：

类似问题：stackoverflow.com/questions/9709374/…

标签： optimization knockout.js

【解决方案1】：

我的建议是不要尝试修复或调试关于大型数据集的 Knockout，而是重构您发送的数据。

如果您在第一次数据调用中为每条记录获取约 10 个字段（而不是 100 个），然后为用户提供“获取详细信息”链接以逐行检索其他 90 个字段。

这将非常快速地加载原始列表，并且每次后续调用更多细节的速度也会很快。

【讨论】：