JSFiddle - React, Tailwind, and code Playground

by drulia

HTML

<script src="https://raw.github.com/andreasbernhard/history.js/master/scripts/bundled/html4+html5/jquery.history.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/finnsson/pagerjs/master/pager.js"></script>
<base href="http://fiddle.jshell.net/_display/" />
<div id="content">
    Home Page <br>
    <a data-bind="page-href: '../page1' ">Go to Page1</a>
    <hr>
    <div data-bind="page: { id: 'page1' }">
        Page1<br>
        <a data-bind="page-href: '../page2' ">Go to Page2</a><br>
        <a data-bind="page-href: $__page__ ">Back to Home Page</a>
    </div>

    <div data-bind="page: { id: 'page2' }">
        Page2<br>
        <a data-bind="page-href: '/' ">Back to Home Page</a>
    </div>
</div>

CSS

#content {
    margin: 20px;
}
a {
    display: block;
}

JavaScript

window.App = {};

App.ViewModel = function() {}


$(function() {
    App.vm = new App.ViewModel();
    pager.useHTML5history = true;
	pager.Href5.history = History;
	pager.extendWithPage(App.vm);
    ko.applyBindings(App.vm, document.getElementById('content'));
    pager.startHistoryJs();
});