Knockout-Clusterize.js

Tiny plugin to display large data sets easily With knocout.js ul を ol にしてみれば分かる通り、すべての要素をDOM上に作っているわけではないので、とても高速に動きます http://nexts.github.io/Clusterize.js/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://mbest.github.io/knockout.punches/knockout.punches.min.js"></script>
<script src="https://oss.maxcdn.com/clusterize.js/0.7.0/clusterize.min.js"></script>
<link rel="stylesheet" href="https://oss.maxcdn.com/clusterize.js/0.7.0/clusterize.css">
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div style="display:inline-block;width:40%">
    Clusterizeが<b style="color:blue">有効</b>の場合
    <div id="scrollArea" class="clusterize-scroll">
    <table  data-bind="clusterize:list()">
      <tbody class="clusterize-content">
      <tr></tr>
      </tbody>
    </table>
    </div>
    
</div>

JavaScript

ko.bindingHandlers['clusterize']= {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext){
        var clusterize = new Clusterize({
       		 	scrollId: 'scrollArea',
            contentElem: $(".clusterize-content",element)[0],
            rows_in_block:10,
            blocks_in_cluster:4
        });
        console.log(clusterize)
        $(element).data('clusterize',clusterize);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var data = valueAccessor();
        var clusterize = $(element).data('clusterize');
        clusterize.update(data);
    }
}

function VM(){
    var vm = this;
    vm.list = ko.observableArray(['<tr><td>1</td></tr>','<tr><td>2</td></tr>']);
    //ko.track(vm);
    
    //ko.getObservable(vm,'list').extend({ throttle: 500 });
}
var vm = new VM();

(function demo(){
    var n = 2;
    for(var i=0;i<500000;i++)
        vm.list.push('<tr><td>'+(++n)+'</td></tr>');
    setInterval(function(){
        
    },100);
})();

//ko.punches.enableAll();
ko.applyBindings(vm);