JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div id="pagination">
<ul class="nav" data-bind="foreach:  ko.utils.range(1, pages)">     
    <!-- ko if: $data == 1 -->  
    <li><a href="#" class="active" data-bind="text: $data"></a></li>   
    <!-- /ko -->    
    <!-- ko ifnot: $data == 1-->
    <li><a href="#" data-bind="text: $data"></a></li>          
    <!-- /ko-->
</ul>
</div>
<button id="button" >click to make it 3</button>

JavaScript

PaginationViewModel = function (initialData) {
    var self = this;
    self.pages = ko.observable(initialData);
};
var pvm = new PaginationViewModel(10);
ko.applyBindings(pvm, $('#pagination').get(0));

$('#button').on('click', function(){
    console.log("set to 3");
    pvm.pages(3);
    console.log(pvm.pages);
});