can/demos/can-component/3.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<table id="websites"></table>

<script id="sites" type="text/mustache">
  {{#websites}}
    <tr>
      <td width='40%'>{{name}}</td>
	  <td width='70%'>{{url}}</td>
	</tr>
  {{/websites}}
</script>
<script src="../../node_modules/steal/steal.js"></script>
<script type='text/javascript'>
steal("can/util", "can/component", "can/map/setter", "can/util/fixture",
	 "can/model", function (can) {


var websites = [{id:1,name:"CanJS",url:"http://canjs.us"},{id: 2,name:"jQuery++",url:"http://jquerypp.com"},
	          {id:3,name:"JavaScriptMVC",url:"http://javascriptmvc.com"},{id: 4,name:"Bitovi",url:"http://bitovi.com"},
	          {id:5,name:"FuncUnit",url:"http://funcunit.com"},{id: 6,name:"StealJS",url:"http://stealjs.com"},
	          {id:7,name:"jQuery",url:"http://jquery.com"},{id: 8,name:"Mootools",url:"http://mootools.com"},
	          {id:9,name:"Dojo",url:"http://dojo.com"},{id: 10,name:"YUI",url:"http://yui.com"},
	          {id:11,name:"DoneJS",url:"http://donejs.com"},{id: 12,name:"Mindjet Connect",url:"http://connect.mindjet.com"},
	          {id:13,name:"JSFiddle",url:"http://jsfiddle.net"},{id: 14,name:"Zepto",url:"http://zepto.com"},
	          {id:15,name:"Spill",url:"http://spill.com"},{id: 16,name:"Github",url:"http://github.com"}];
	          
	          
can.fixture("/websites", function (request) {
  var start = request.data.offset || 0
  end = start + (request.data.limit || websites.length);
  return {
    count: websites.length,
    data: websites.slice(start, end)
  }
});
	 	
var Website = can.Model.extend({
  findAll: "/websites"
}, {});



var Paginate = can.Map.extend({
  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)
  }
});

paginate = new Paginate();

var websitesCompute = can.compute(function(){
	var param = {
		limit: paginate.attr('limit'),
		offset: paginate.attr('offset')
	}
	return Website.findAll(param);
});

var writeWebsites = function(websites){
	$("#websites").html( can.view("sites",{
	  websites: websites
	}));
	paginate.attr("count", websites.count)
}

websitesCompute.bind("change", function(ev, websitesDeferred){
	websitesDeferred.then(writeWebsites)
})

websitesCompute().then(writeWebsites)

})
</script>