KnockoutJS + Infinite Scroll?

https://groups.google.com/d/topic/knockoutjs/C7NCqdUPxXM/discussion

by rniemeyer

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div data-bind="text: viewModel.items().length"></div>
<div id="main" data-bind="template: { name: 'itemsTmpl', foreach: items }, event: { scroll: scrolled }">
    
</div>

<script id="itemsTmpl" type="text/html">
    <div data-bind="text: name"></div>
</script>

CSS

#main { height: 500px; width: 500px; overflow: scroll; }
#main div { background-color: #eee; margin: 5px; height: 100px; }

JavaScript

var viewModel = {
    items: ko.observableArray([]),
    scrolled: function(data, event) {
        var elem = event.target;
        if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 200)) {
            pushItems(20);
        }
    }
};

function pushItems(cnt) {
    var seed = viewModel.items().length;
    for (var i = 0; i < cnt; i++) {
        viewModel.items.push({
            id: seed + i,
            name: "Name" + (seed + i)
        })
    }
}

pushItems(20);

ko.applyBindings(viewModel);