JSFiddle - React, Tailwind, and code Playground

by rpallas

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc2.debug.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!-- ======= Knockout Templates ======= -->

<script id="template1" type="text/html">
    <h1>Template one</h1>
</script>

<script id="template2" type="text/html">
    <h1>Template Two</h1>
</script>

<script id="template3" type="text/html">
    <h1>Template Three</h1>
</script>

<!-- ======= [END] Knockout Templates ======= -->

<div>
    <ul class="nav">
        <li data-bind="click: showTemplateOne">One</li>
        <li data-bind="click: showTemplateTwo">Two</li>
        <li data-bind="click: showTemplateThree">Three</li>
    </ul>
    <div data-bind="template: {name: getCurrentTemplate}, slideInTemplate: currentTemplate" class="template">
    </div>
</div>

JavaScript

ko.bindingHandlers.slideInTemplate = {
    init: function(element, valueAccessor) {
        var isVisible = valueAccessor();
        $(element).toggle(isVisible);
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        var isVisible = valueAccessor(),
            allBindings = allBindingsAccessor(),
            duration = allBindings.slideDuration || 500;
        isVisible 
            ? $(element).fadeIn(duration)
            : $(element).fadeOut(duration)
    }
};

$(function () {
    
    viewModel = function () {
        var self = this;
        currentTemplate = ko.observable("template1"),
        getCurrentTemplate = function () {
            return currentTemplate();
        }
        showTemplateOne = function() {
            currentTemplate("template1");            
        }, 
        showTemplateTwo = function() {
            currentTemplate("template2");            
        },
        showTemplateThree = function() {
            currentTemplate("template3");            
        };

    
        return {
            currentTemplate : currentTemplate,
            getCurrentTemplate : getCurrentTemplate 
        };
    } ();
  
    ko.applyBindings(viewModel);
});