HOBA

by gurkavcu

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<div data-bind="template : { name : 'XXX' , foreach : $root.belgeModel.pager().pages }">

</div>

<script id="XXX" type="text/x-jquery-tmpl">
        <span data-bind="text:name"></span>
</script>    
<button id="xx" >Change</button>

CSS

.remove {
    background:url();
   
}

JavaScript

var option = function(name, value) {
    this.name = name;
    this.value = value;
};

function Pager(itemPerPage,itemCount) {
    
    var self = this;
    
    this.index = ko.observable(1);
    this.page  = ko.observable(1);
    this.itemPerPage = itemPerPage;
    this.itemCount = itemCount;
    this.pages = ko.observableArray();
    
    this.setIndex = function(pix) { 
        if( pix > 0 && pix <= self.itemCount ) {
            self.index(pix);                        
            var pageCount = parseInt(pix/self.itemPerPage,10);            
            self.page( pix % self.itemPerPage == 0 ? pageCount : pageCount+1 );
        }
    }
    
    this.getPages = ko.computed(function() {
       
       var xxx = new Array(); 
       var _pages = ko.observableArray([]); 
         
        var _page =  self.page();
        
        var end = (( _page*itemPerPage > itemCount ) ? itemCount : _page*itemPerPage);
            
        for (var i = ((_page-1)*itemPerPage)+1; i<= end; i++) {            
            xxx.push(new option(''+i,''+i));            
        };       
        
        self.pages(ko.utils.arrayMap(xxx,function(item) {
            return item;
        }));
        
        //console.log("HEYY");
        console.log(self.pages().length);   
        //return _pages;
    },self);        
         
 }




function BelgeModel() {
    var self = this;
    this.pager; 
}

function ViewModel() {
   this.pages = ko.observableArray();
   this.belgeModel = new BelgeModel();
};



$(function() {  
    
    var viewModel = new ViewModel();
    viewModel.belgeModel.pager= ko.observable(new Pager(5,13,viewModel));
    ko.applyBindings(viewModel);
    
    $("#xx").click(function(){
        viewModel.belgeModel.pager(new Pager(10,20,viewModel));
    });
     
})