foreach大选择减慢knockoutjs数据绑定

时间:2014-11-04 21:44:42

标签: optimization knockout.js

我的问题

我有一个表加载相同的选择,每个检索到的数据项都有数百个选项。我检索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);
}

1 个答案:

答案 0 :(得分:1)

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

如果您为第一次数据通话每条记录(而不是100)采用~10个字段,然后提供&#34;获取详细信息&#34;用户链接以逐行检索其他90个字段。

这样可以非常快速地加载原始列表,并且每次后续调用更多细节也会很快。