JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script>
    $(document).on("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    //$.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script id="home-template" type="dot/template">
    <a href="#page2">Page2</a>
</script>
<script id="page2-template" type="dot/template">
    <a href="#">Home</a>
</script>

<div data-role="header">
            <a data-role="button" data-icon="search" data-iconpos="notext" id="searchbutton">Panel</a>
            <h1>Title</h1>
            <a href="logout.jsp" data-role="button" data-icon="power" data-iconpos="notext">Logout</a>
        </div>
<div data-role="page">poop</div>
        <div data-role="footer">
            © Company Sweden AB<br>
            <span class="buildinfo">N/A  Development Version</span>
        </div>

JavaScript

$(function(){
                $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
     
 })
 
 var AppRouter = Backbone.Router.extend({
    routes:{
        "":"home",
        "page2":"page2"
    },
    initialize:function () {
        this.firstPage = true;
    },
    home:function () {
        console.log('#home');
        this.changePage(new HomeView());
    },
    page2:function () {
        console.log('#page2');
        this.changePage(new Page2View());
    },
    changePage:function (page) {
        debugger;
        $(page.el).attr('data-role', 'page');
        page.render();
        $('div[data-role="header"]').after($(page.el));
        var transition = $.mobile.defaultPageTransition;
        // We don't want to slide the first page
        if (this.firstPage) {
            transition = 'none';
            this.firstPage = false;
        }
         $(page.el).on('pagehide', function (event, ui) {
            $(event.currentTarget).remove();
        });
        $.mobile.changePage($(page.el), {changeHash:false, transition: transition});
    }
});
window.Page2View = Backbone.View.extend({
    template:doT.template($('#page2-template').html()),

    render:function () {
        $(this.el).html(this.template());
        return this;
    }
});
window.HomeView = Backbone.View.extend({
    template:doT.template($('#home-template').html()),

    render:function () {
        $(this.el).html(this.template());
        return this;
    }
});

$(document).ready(function () {
    
    console.log('document ready');
    app = new AppRouter();
    Backbone.history.start();
});