KnockoutJS отображает стоимость строк целых таблиц массива наблюдаемых после того, как я добавляю новые элементы

Question

В основном у меня есть таблица данных, в которой я рендерил строки с нокаутом 'foreach'.Первоначальный рендер отображает 100 строк, и есть кнопка, которая будет запрашивать следующие 100 строк с сервера с помощью ajax-вызова при нажатии.Поскольку таблица довольно большая (много столбцов) со многими наблюдаемыми, рендеринг занимает много времени.Первые 100 строк все еще в порядке, но если я хочу показать больше, это займет очень много времени, особенно когда оно достигает, например, 1000 строк.

Устали выяснять, почему это происходит, и я узнал, когда добавляю новые строкив наблюдаемом массиве , который содержит все строки, пользовательский интерфейс отображает все строки, начиная с первой все время.Я ожидал увидеть, что сетка обновляется только новыми добавленными строками.

dataSource это pureComputed

ОБНОВЛЕНИЕ : так я добавляю следующие 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>