CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by cherif_b

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<div id='nextprev'></div>

<!-- TEMPLATES -->
<script id="nextPrevStache" type="text/mustache">
  <a href="javascript://" 
     class="prev {{#paginate.canPrev}}enabled{{/paginate.canPrev}}">Prev</a>
  <a href="javascript://" 
     class="next {{#paginate.canNext}}enabled{{/paginate.canNext}}">Next</a>
</script>

CSS

#nextprev { margin: 5px; }
#nextprev a {
    padding: 3px;
    color: gray;
    border: solid 1px gray;
    text-decoration: none;
}
#nextprev a.enabled {
    color: blue;
    border: solid 1px blue;
}

JavaScript

(function() {
    var Paginate = can.Observe({
      defaults : {
        count: Infinity,
        offset: 0,
        limit: 100
      }
    },{
      setCount: function(newCount, success, error){
        return newCount < 0 ? 0 : newCount;
      },
      setOffset: function(newOffset, success, error){
        return newOffset < 0 ? 
            0 : 
            Math.min(newOffset, !isNaN(this.count - 1) ? 
                     this.count : 
                     Infinity )
      },
      next: function(){
        this.attr('offset', this.offset+this.limit);
      },
      prev : function(){
        this.attr('offset', this.offset - this.limit )
      },
      canNext : function(){
        return this.attr('offset') < this.attr('count') - 
                this.attr('limit')
      },
      canPrev : function(){
        return this.attr('offset') > 0
      }
    });
    
    var paginate = new Paginate({
        limit: 20,
        offset: 0,
        count: 100
    });
    
    var NextPrev = can.Control({
        init: function(){
            this.element.html( 
               can.view('nextPrevStache',this.options) );     
        },
        ".next click" : function(){
            var paginate = this.options.paginate;
            paginate.attr('offset', paginate.offset+paginate.limit);
        },
        ".prev click" : function(){
            var paginate = this.options.paginate;
            paginate.attr('offset', paginate.offset-paginate.limit );
        }
    });
        
    new NextPrev("#nextprev",{paginate: paginate});
    
    
    
    
    
    
    
})();