Sign upLogin

bitovi/canjs

View on GitHub
Star
demos/can-component/paginate_events_next.html

Summary

Maintainability
Test Coverage
<body>
<div id="out"></div>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty">
import { Component, stache, DefineMap } from "can";
const demoHtml = `Page {{ page }} <button class='next'>Next</button>`;

Component.extend({
    tag: "my-paginate",
    ViewModel: {
        offset: {
            default: 0
        },
        limit: {
            default: 20
        },
        page: {
            get: function(){
                return Math.floor(this.offset / this.limit) + 1;
            }
        },
        next: function(){
            this.offset = this.offset + this.limit;
        }
    },
    view: stache(demoHtml),
    events: {
        ".next click": function(){
            this.viewModel.next();
        }
    }
});

const template = stache("<my-paginate/>");
document.getElementById("out").appendChild(template({}));
</script>
</body>