KnockoutJS + Infinite Scroll
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="main" data-bind="foreach: items">
<div data-bind="text: name"></div>
</div>
CSS
#main div {
background-color: #eee;
margin: 5px;
height: 100px;
}
JavaScript
var viewModel = {
items: ko.observableArray([]),
maxId: 0,
pendingRequest: ko.observable(false)
};
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
getItems(20);
}
});
function getItems(cnt) {
if (!viewModel.pendingRequest()) {
//create fake data to pass to echo service
viewModel.pendingRequest(true);
$.ajax({
type: 'POST',
url: '/echo/json/',
dataType: 'json',
data: {
json: ko.toJSON(entries),
},
success: function (entries) {
viewModel.items(viewModel.items().concat(entries));
viewModel.pendingRequest(false);
},
error: function () {
viewModel.pendingRequest(false);
}
});
}
}
ko.applyBindings(viewModel);
getItems(20);