添加新元素后，KnockoutJS呈现整个表行的可观察值数组成本

Question

基本上我确实有一个数据表，在这里我用敲除“ foreach”渲染行。 初始渲染将显示100行，并且有一个按钮可以通过单击ajax调用从服务器请求下100行。 因为表很大（很多列），并且有许多可观察到的东西，所以渲染时间很长。 前100行仍然可以，但是如果我想显示更多行，则需要花费很长时间，尤其是达到1000行时。

试图弄清楚为什么会发生这种情况，我发现当我在包含所有行的 observalbeArray 中添加新行时，UI始终呈现从第一个开始的所有行。我的期望是看到仅使用新添加的行来更新网格。

dataSource它是 pureComputed

UPDATE ：这就是我添加下100行的方式

 result.data.TotalResults = result.data.DataRows.length + viewmodel.dataSource().length;
 viewmodel.ds.pushAll(result.data.DataRows);

Answer 1

如果您希望ko仅呈现新行，则应保留原始observableArray并仅使用push添加新行。

下面是示例使用方法

const vm = {
  data: ko.observableArray([])
};

ko.applyBindings(vm);

// reference of observable data
var _data = vm.data();

setTimeout(() => {
  const ajaxData = ['one', 'two', 'three'];
  _data.push(...ajaxData);
  vm.data.valueHasMutated();
}, 100);


setTimeout(() => {
  // midify already rendered <li> to see if it gets re-rendered by ko  
  const firstLi = document.querySelector('ul > li');
  firstLi.innerText = 'modified';
  firstLi.style.color = 'red';
}, 1000);


setTimeout(() => {
  var ajaxData2 = ['four', 'five'];
  _data.push(...ajaxData2);
  vm.data.valueHasMutated();
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: data">
  <li data-bind="text: $data">
</ul>