敲除緩慢綁定海量數據

我正在使用敲除渲染大量的數據。（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，使得bindidi foreach bindi更狡猾，並將渲染僅應用於部分ArrayItems列表，並使用div滾動來渲染div「onDemand」，當用戶滾動div時。

來源

2015-04-03 Roberto Serafin

嘗試在視圖模型中執行一種懶惰的方式，而無法到達滾動上的數據服務器（在div上）。你完全反對懶加載？ .. – 2015-04-03 10:30:34

http://stackoverflow.com/questions/9709374/knockout-js-incredibly-slow-under-semi-large-datasets 我想這就是爲什麼ReactJS現在正在着火，它是虛擬的dom似乎在這些情況下發光。 – 2015-04-03 12:07:14

您可以嘗試就地替換使用的綁定處理程序，然後嘗試https://github.com/brianmhunt/knockout-fast-foreach，但對於那些數量的項目，我認爲這不夠。

您需要的是分頁或虛擬化列表。後者是你在最後一段中描述的那個。以此作爲搜索詞，應該很容易找到解決方案。

來源

2015-04-03 10:25:25 Pharao2k

除非是你必須使用一個自定義的淘汰賽結合特定的要求，它可能更容易使用計算觀察到的，給你原數組的一個切片：

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

你可以稍作修改，使用此方法來實現數據的分頁視圖。這在內存使用方面會更好，因爲用戶不斷點擊「顯示更多」，您不會在DOM中添加項目。

來源

2015-04-04 00:50:35 McCroskey

敲除緩慢綁定海量數據

回答

相關問題