Skeleton Knockout, JQuery, bootstrap

A skeleton for knockout, jquery and bootstrap

by sujesharukil

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<section class="content">
    <div class="hero-unit">
        Total users : <span data-bind="text: totalRoster"></span>
        <ul data-bind="foreach: filteredRoster">
            <li>
                <span data-bind="text: id"></span> -- <span data-bind="text: firstName"></span>
            </li>
        </ul>
        <div class="pagination">
      <ul>
        <li><a href="#" data-bind="click: prev">Prev</a></li>
          <!-- ko foreach: ko.utils.range(1, totalRoster()/toDisplay() + 1) -->
          <li><a href="#" data-bind="text: $data, click: $parent.changePage"></a></li>
          <!-- /ko -->
        <li><a href="#" data-bind="click: next">Next</a></li>
      </ul>
</div>
    </div>
</section>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

var vm = function(){
    var rosterArray = ko.observableArray(),
        currentPage = ko.observable(1),
        toDisplay = ko.observable(20),
        filteredRoster = ko.computed(function(){
            var init = (currentPage() - 1) * toDisplay(),
                filteredList = [],
                rosterLength = rosterArray().length,
                displayLimit = toDisplay();
            
            if(rosterLength === 0)
                return [];
           
            for(var i = init; i < (displayLimit + init) - 1 && i < rosterLength; i++){
                filteredList.push(rosterArray()[i]);
            }
            
            return filteredList;
        }),
        totalRoster = ko.computed(function(){
            return rosterArray().length;
        }),
        changePage = function(data){
            currentPage(data);
        },
        next = function(){
            if((currentPage() * toDisplay()) > rosterArray().length)
                return;
            
            currentPage(currentPage() + 1);
        },
        prev = function(){
            if(currentPage() === 1)
                return;
            
            currentPage(currentPage() - 1);
        },
        getRoster = function(){
               var $promise = _makeRequest();
            $promise.done(function(data){
                rosterArray(data);
            });
        },
        _makeRequest = function(){
            //this is mimicking an ajax call
            var data = {
                json: ko.toJSON([{
                                    id: 1,
                                    firstName: 'John'
                                },
                               {
                                   id: 2,
                                   firstName: 'Joe'
                               },
                              {
                                   id: 3,
                                   firstName: 'JAne'
                               },
                  ...