Ractive Paging Decorator

by tanvir_alam_shawn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/1.3.11/ractive.min.js"></script>
<div id='container'></div>

<script id='tpl' type='text/ractive'>
    <h1>Tooltip decorator</h1>
    <div>
        <button on-click="prev" class="{{^page}}disabled{{/page}}">Prev</button>
        <span>{{page}}</span>
        <button on-click="next" class="{{(page*pageSize)+pageSize >= list.length ? 'disabled':''}}">Next</button>
    </div>
    <ul>
    {{#pageItems}}
        <li> {{.name}} - {{.code}} </li>
    {{/pageItems}}
    </ul>
    
    {{#list}}
    <span>{{.name}}</span>
    {{/list}}  
</script>

CSS

body {
    font-family: 'Helvetica Neue', 'Arial';
    font-size: 16px;
    color: #353535;
}

.disabled{
    display: none;
}

.ractive-tooltip {
    display: block;
    position: fixed;
    max-width: 200px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    padding: 0.5em;
    font-size: 0.8em;
}

#container span {
    border-bottom: 1px dashed #999;
}

JavaScript

var list = [];
for(var i=1; i<85;i++){
    list.push({name: i + "_item", code: "(" + i + "-" + i + ")" });
}
ractive = new Ractive({
    el: 'container',
    template: '#tpl',
    data: {
        list: list,
        page: 0,
        pageSize: 5
    },   
    computed: {
        pageItems: function(){
            var curPage = this.get('page'),
                size = this.get('pageSize'),
                items = this.get('list'),
                startingPoint = 0;
            
            startingPoint = curPage * size;
            
          return  items.slice(startingPoint, startingPoint + size);
        }
    }
});

ractive.on('next', function(){       
    var curPage = this.get('page');
    this.set('page', curPage + 1);    
});

ractive.on('prev', function(){
    var curPage = this.get('page');
    this.set('page', curPage - 1);
});