Question

我正在使用knockout来渲染大量数据。（35000记录）我不能使用lazyload请求，通过服务器传递，我在浏览器中有数据。

如果我在我的ViewModel中使用observableArray，浏览器会在显示绑定结果之前冻结大约10秒钟。

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

使用此HTML绑定

<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>

这是所需结果的原型

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

我的问题是：

如何创建一个通用的customBinding，使foreach绑定更加狡猾，并将渲染仅应用于部分ArrayItem列表，并使用div滚动来渲染div只有“onDemand”，当用户滚动div。

Answer 1

你可以尝试就地替换使用过的绑定处理程序并尝试使用https://github.com/brianmhunt/knockout-fast-foreach，但是对于那些数量的项目，我认为这还不够。

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

Answer 2

除非特别要求您必须使用自定义挖空绑定，否则使用计算的observable可能更容易为您提供原始数组的切片：

var vm = function () {
    var source = [];

    this.scroll = function() {
        var objDiv = document.getElementById("scroll");
        objDiv.scrollTop = objDiv.scrollHeight;        
    }

    this.visibleItems = ko.observable(50);

    this.more = function () {
        this.visibleItems(this.visibleItems() + 50);
        this.scroll();        
    }

    for (var i = 0; i < 50000; i++) {
        source.push(i);
    }

    this.visible = ko.computed(function() {
        return source.slice(0, this.visibleItems());            
    });        
}

ko.applyBindings(vm());
this.scroll();

Example on JSFiddle

您可以通过一些小修改，使用此方法实现数据的分页视图。这在内存使用方面要好得多，因为当用户不断点击＆＃34;显示更多＆＃34;

时，你不会在DOM中添加项目。

Knockout缓慢绑定大量数据

2 个答案: