can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
35 lines (31 loc) • 894 B
HTML
<body>
<div id='out'></div>
<script src="../../node_modules/steal/steal.js" main="@empty"></script>
<script type='text/javascript'>
steal("can/component", "can/view/stache",function() {
can.Component.extend({
tag: "my-paginate",
viewModel: {
offset: 0,
limit: 20,
next: function(){
this.attr("offset", this.offset + this.limit);
},
page: function(){
return Math.floor(this.attr('offset') / this.attr('limit')) + 1;
}
},
template: can.stache("Page <span>1</span> <button class='next'>Next</button>"),
events: {
".next click": function(){
this.viewModel.next();
},
"{scope} offset": function(){
this.element.find("span").text( this.viewModel.page() )
}
}
})
$("#out").html(can.stache("<my-paginate/>")({}))
})
</script>
</body>