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.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.object.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<div id="pagination"></div>
	<script id="paginationstache" type='text/mustache'>
	<pagination>
		<list deferreddata='deferred'>
			{{#each items}}
				<li>{{name}}</li>
			{{/each}}
		</list>
		
		
		
		 <next-prev paginate='paginate'></next-prev>
		<page-count page='paginate.page' count='paginate.pageCount'></page-count>
	</pagination>

JavaScript

can.Map.extend('Paginate', {
    count: Infinity,
    offset: 0,
    limit: 5,
    next: function() {
        this.attr('offset', this.offset + this.limit);
    },
    prev: function() {
        this.attr('offset', this.offset - this.limit)
    },
    setOffset: function(newOffset) {
        return newOffset < 0 ?
            0 :
            Math.min(newOffset, !isNaN(this.count - 1) ?
                this.count - 1 :
                Infinity)
    },
    setCount: function(newCount, success, error) {
        console.log(newCount);
        return newCount < 0 ? 0 : newCount;
    },
    canNext: function() {
        return this.attr('offset') < this.attr('count') -
            this.attr('limit');
    },
    canPrev: function() {
        return this.attr('offset') > 0;
    },
    page: function(newVal) {
        if (newVal === undefined) {
            return Math.floor(this.attr('offset') / this.attr('limit')) + 1;
        } else {
            this.attr('offset', (parseInt(newVal) - 1) * this.attr('limit'));
        }
    },
    pageCount: function() {
        return this.attr('count') ?
            Math.ceil(this.attr('count') / this.attr('limit')) : null;
    },
    goTo: function(page) {
        if (this.page() == page)
            return;

        this.page(page);
    },
    pages: function() {
        var pages = [],
            
            pageRange = this.pageRange();

        for (var i = pageRange.beginPage; i <= pageRange.endPage; i++) {
            pages.push(i);
        };
        return pages;
    },
    pageRange: function() {

        var page = this.page(),
            count = this.pageCount(),
            maxLinks = 5,
            beginPage = Math.ceil(Math.max(1, page - maxLinks / 2)),

            endPage = beginPage + maxLinks - 1;

        if (endPage >= count) {
            endPage = count;
            beginPage = Math.ceil(Math.max(1, endPage - (maxLinks - 1)));
        }
        return {
            beginPage: beginPage,
            endPage:...