JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<script src="http://learn.knockoutjs.com/scripts/lib/sammy.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-2.0.0.js"></script>
<a href="#home">Test1</a>
<a href="#test2">Test2</a>

<nav id="navi">
    <ul data-bind="foreach:navi">
        <li data-bind="text:name"></li>
    </ul>
</nav>
<div id="container"></div>

<script type="text/html" id="home">
    <h3 data-bind="text: title"></h3>
    <p data-bind="text: desctiption"></p>
</script>

<script type="text/html" id="test2">
    <pre data-bind="text: title"></pre>
    <strong data-bind="html: desctiption"></strong>
</script>

JavaScript

var globalNav = [ {name:'nav1'}, {name:'nav2'}];
var ViewModel= {
    
    HOME:{
        title: 'Template test1',
        desctiption:'desctiption 1'
    },
    
    TEST2:{
        title: 'Template Test2',
        desctiption:'<i>desctiption 1</i>'
    }
};

    
$.sammy(function () {

    this.get('#:page', function () {
        
    var modelName = this.params.page.toUpperCase();
    var model = ViewModel[modelName];
        model['navi'] = globalNav;
        
        console.log(model);
        $('#container').empty();
        
        $('<div data-bind="template: \'' + this.params.page + '\'"></div>').appendTo('#container');
                    
        ko.applyBindings(model);
    });

    this.get('', function () { 
       this.app.runRoute('get', '#home');
    });

}).run();