JSFiddle - React, Tailwind, and code Playground

by gene

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<button data-bind="click: addItems">Add</button>

<div data-blind="with: pager">
    <div>Pager summary: <span data-blind="text: (maxPageIndex() + 1)"></span> pages</div>
</div>

<div>ViewModel list size: <span data-bind="text: nItems"></span></div>

<ul data-bind="foreach: list">
    <li data-bind="text: $data"></li>
</ul>

JavaScript

function Pagination(items, size) {
    var self = this;
    
    this.list = (typeof items == 'function') ? items : ko.observableArray(items);
    this.pageSize = ko.observable(size || 10);
    this.pageIndex = ko.observable(0);
    
    this.maxPageIndex = ko.computed(function() {
        return Math.ceil(this.list().length / this.pageSize()) - 1;
    }, this);
    
    this.goToPage = function(p) {
        p--;
        if (p>=0 && p<=self.maxPageIndex())
            self.pageIndex(p);
    };    
    
    this.rows = ko.computed(function() {
        var size = this.pageSize();
        var start = this.pageIndex() * size;
        var items = this.list().slice(start, start + size);
        return items;
    }, this);

};

function ViewModel() {
    var self = this;
    
    this.items= ko.observable(["item 1', 'item 2', 'item 3']);
    this.nItems = ko.computed(function() {
        return this.items().length;
    }, this);
    
//    this.pager = ko.observable(new Pagination(this.list, 4));
    
    this.addItems = function() {
        console.log("Adding items");
        var nItems = self.items().length;
        for (var i=0; i<5; i++)
            self.items().push( "New item " + (nItems + i + 1));
        console.log("new length = " + self.items().length );
    }
}

ko.applyBindings(new ViewModel());