JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<template id="pagination-tpl">
    <!-- ko if: max()> 1 -->
    <ul class="pagination pagination-sm" data-bind="foreach: list()">
        <li data-bind="css: { active: $data === $parent.page() }, click: function() { $parent.callback($data) }"> <a data-bind="text: $data"></a>

        </li>
    </ul>
    <!-- /ko -->
</template>


<div class="text-center" id="somePage">
    <div data-bind="text: page"></div>
    <div data-bind="text: max"></div>
    <pagination params="page: page(), max: max()"></pagination>
</div>

JavaScript

ko.components.register('pagination', {
    viewModel: function (params) {
        var self = this;
        this.page = ko.observable(params.page);
        this.max = ko.observable(params.max);

        this.list = ko.pureComputed(function () {
            var a = self.page(),
                list = [],
                min = a - 2 < 1 ? 1 : a - 2,
                max = a + 2 > self.max() ? self.max() : a + 2;

            for (var i = min; i <= max; i++) {
                list.push(i);
            }
            return ko.observableArray(list);
        });

        this.callback = function (i) {
            console.log(i);
            self.page(i);
        };
    },
    template: {
        element: 'pagination-tpl'
    }
});

function Vm(){
    this.page = ko.observable(2);
    this.max = ko.observable(6);
}
var vm = new Vm();

ko.applyBindings(vm, document.getElementById('koBinding_somePage'));