can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
44 lines (39 loc) • 911 B
HTML
<body>
<div id='out'></div>
<script src="../../node_modules/steal/steal.js" main="@empty">
var Component = require("can-component");
var stache = require("can-stache");
var DefineMap = require("can-define/map/map");
var ViewModel = DefineMap.extend({
offset: {
value: 0
},
limit: {
value: 20
},
page: {
get: function(){
return Math.floor(this.offset / this.limit) + 1;
}
},
next: function(){
this.offset = this.offset + this.limit;
}
});
Component.extend({
tag: "my-paginate",
ViewModel: ViewModel,
template: stache("Page <span>1</span> <button class='next'>Next</button>"),
events: {
".next click": function(){
this.viewModel.next();
},
"{viewModel} offset": function(){
this.element.querySelector("span").textContent = this.viewModel.page;
}
}
})
var template = stache("<my-paginate/>");
document.getElementById("out").appendChild(template({}));
</script>
</body>