javascript - 绑定(bind)海量数据时Knockout速度慢

Question

我正在使用 knockout 来呈现大量数据。 (35000条记录) 我无法使用lazyload请求，通过服务器传递，我在浏览器中有数据。

如果我在 ViewModel 中使用 observableArray，浏览器会卡住大约 10 秒，然后再显示绑定(bind)结果。

var vm = function () { 
      var ar = [];
      for (var i=0; i<35000; i++){ 
           ar.push(i);
      }
      this.SelectedElementsListData = ko.observableArray(ar);
}
ko.applyBindings(vm());

使用此 HTML 绑定(bind)

<div data-bind="foreach:SelectedElementsListData" class="scrolling">
     <div data-bind="text:$data"></div>
</div>
<div data-bind="event: { click: fill }">
     CLICK HERE TO START
</div>

这是所需结果的原型(prototype)

https://jsfiddle.net/RobertoSerafin/4axdwkfo/

我的问题是:

如何制作通用的customBinding，以使foreach绑定(bind)更加狡猾，并仅将渲染应用于ArrayItems的部分列表，并使用div滚动仅“onDemand”渲染div，当用户滚动 div 时。

Answer 1

您可以尝试就地替换已使用的绑定(bind)处理程序并尝试 https://github.com/brianmhunt/knockout-fast-foreach ，但对于这么多的项目，我认为这还不够。

您需要的是分页或虚拟化列表。后者是您在上一段中描述的。以此作为搜索词，应该很容易找到解决方案。