2

I'm using knockout to render a big quantity of data. (35000 record) I can't use lazyload request, passing by server, I have the data in the browser.

If I'm using observableArray in my ViewModel, the browser freezes for about 10 seconds, before showing the result of binding.

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

And with this HTML binding

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

this is a prototype of the result needed

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

My question is:

How can I make a generic customBinding, to make the foreach binding more sly, and apply rendering only to a partial list of ArrayItems, and using the div scrolling to render div only "onDemand", when the user scrolls the div.

2
  • try doing a lazy way in view model without reaching server for data on scroll (on div ). are you completely against lazy loading ? ..
    – super cool
    Apr 3, 2015 at 10:30
  • stackoverflow.com/questions/9709374/… I suppose this is a reason why ReactJS is on fire right now with it's virtual dom which seems to shine in these situations. Apr 3, 2015 at 12:07

2 Answers 2

1

You could try an in-place replace of the used binding handler and try https://github.com/brianmhunt/knockout-fast-foreach , but with that amount of items I don't think that'll be enough.

What you'll need is either paging or a virtualized list. The latter is that which you described in your last paragraph. With that as a search term, it should be easily enough to find a solution.

1

Unless there is a particular requirement that you must use a custom knockout binding, it's probably easier to use a computed observable to give you a slice of the original array:

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

You could, with a small modification, use this approach to implement a paged view of your data. That would be a lot nicer in terms of memory use, as you wouldn't keep adding items in the DOM as the user keeps clicking "Show More".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.