Testing pagedServerSideList
HTML
<script src="http://ajaxload.info/download.php?img=cache/FF/FF/FF/00/00/00/1-1.gif"></script>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<div>
<div data-bind="visible: !pagedList.loadPage.isRunning()"> <a href="#" data-bind="click: pagedList.previousPage">Previous Page</a>
<span data-bind="text: 'Page ' + (pagedList.pageIndex() + 1) + ' of ' + pagedList.pageCount()"></span>
<a href="#" data-bind="click: pagedList.nextPage">Next Page</a>
</div>
<div data-bind="visible: pagedList.loadPage.isRunning" class="spinner">Loading...</div>
<ul data-bind="foreach: pagedList">
<li data-bind="text: id"></li>
</ul> <a href="#" data-bind="click: function() { setPageSize(5); }, visible: !pagedList.loadPage.isRunning()">5 per page</a>
<a href="#" data-bind="click: function() { setPageSize(10); }, visible: !pagedList.loadPage.isRunning()">10 per page</a>
</div>
CSS
* {
font-family:'Segoe UI'
}
li {
margin: 1px;
background: #eee;
}
JavaScript
/*
ko.command and ko.pagedList implementations
scroll down for sample code
*/
(function (window, ko, undefined) {
"use strict";
window.Utils = window.Utils || {};
ko.command = window.Utils.command = function (options) {
//allow just a function to be passed in
if (typeof options === "function") {
options = {
action: options
};
}
//check an action was specified
if (!options) {
throw "No options were specified";
}
if (!options.action) {
throw "No action was specified in the options";
}
var
//flag to indicate that the operation is running
_isRunning = ko.observable(false),
//flag to indicate that the operation failed when last executed
_failed = ko.observable(false),
//record callbacks
_callbacks = {
done: [],
fail: [function () {
_failed(true);
}],
always: [function () {
_isRunning(false);
}]
},
//factory method to create a $.Deferred that is already completed
_instantDeferred = function (resolve, returnValue) {
var deferred = $.Deferred();
if (resolve) {
deferred.resolve(returnValue);
} else {
deferred.reject(returnValue);
}
return deferred;
},
//execute function (and return object
_execute = function () {
//check if we are able to execute
if (!_canExecute()) {
//dont attach any global handlers
return _instantDeferred(false).promise();
}
//notify that we are running and clear any existing error message
...