knockout js show subset of observable array

Question

I have a viewmodel with 600 items (they are task reminders) sorted by oldest to newest in an observableArray called workQueue which I display as ul > li. This can take some time to render.

I'm also using knockout-sortable.

<ul class="drop-target" data-bind="sortable: workQueue">
    <li data-bind="text: title"></li>
</ul>

What I was hoping to do was only render the top 20 of the list and as the 1st item is popped the next in the list is shown. If the user filters the list then only a max of 20 would ever show.

Is there a way in sortable: of exiting the render when I hit a certain count.

Answer 1

No, there isn't a way to stop rendering when you hit a certain amount without tweaking the code, but you might want to consider using a computed property to simulate the page size you specified like this:

var ViewModel = function () {
    var self = this;
    var work = new Array(600);
    for (var i = 0; i < work.length; i++) {
        work[i] = {
            name: i.toString()
        };
    }
    self.startPos = ko.observable(0);
    self.pageSize = ko.observable(20);
    self.workQueue = new ko.observableArray(work);
    self.workQueue.paged = ko.computed(function () {
        var start = self.startPos();
        var end = self.workQueue().length;
        end = Math.min(end, start + self.pageSize());
        return self.workQueue().slice(start, end);
    });
};

var vm = new ViewModel();
ko.applyBindings(vm);

loop();

function loop() {
    if (vm.startPos() + vm.pageSize() < vm.workQueue().length)  {
        vm.startPos(vm.startPos() + 1);
        window.setTimeout(loop, 10);
    }

}

It just creates a secondary slice of the original array, which you'd bind to instead of the original.

However, the sorting behavior would be strange if you can only see part of the list?

http://jsfiddle.net/Dzpkx/1/