JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<script src="http://requirejs.org/docs/release/2.1.11/minified/require.js"></script>
<script type="text/html" id="module-a">
    A
</script>
<script type="text/html" id="module-b">
    B
</script>

<div data-bind="module: 'wrapper'">
    <button data-bind="click: toggleModule">Toggle</button>
    <section data-bind="module: activeModule"></section>
</div>

JavaScript

define('wrapper', ['knockout'], function(ko) {
   
    var modules = [{
        name: 'module-a', 
        template: 'module-a', 
        afterRender: function(){ console.log('a-after'); }
    },{
        name: 'module-b', 
        template: 'module-b', 
        afterRender: function() {console.log('b-after');}
    }];
    
    return function() {   
        var self = this;
        this.modules = modules;
        this.activeModuleKey = 0;
        
        // Initializing with no active module
        this.activeModule = ko.observable(null);
        
        // Module will be activated when click on button
        this.toggleModule = function() {
            self.activeModuleKey = self.activeModuleKey == 1 ? 0:1;
            self.activeModule(self.modules[self.activeModuleKey]);
        }
        
        // Uncomment to initialize to the first ViewModel
        //this.toggleModule();
    }    
});

define('module-a',function() {   
    return {}    
});

define('module-b', function() {   
    return {}    
});

require.config({
    paths: {
        'jquery' : 'http://code.jquery.com/jquery-2.0.1',
        'knockout' : 'http://knockoutjs.com/downloads/knockout-2.3.0',
        'knockout-amd-helpers' : 'https://raw.github.com/rniemeyer/knockout-amd-helpers/master/build/knockout-amd-helpers',
        'text' : 'https://raw.github.com/requirejs/text/latest/text'
    }
});

require(['jquery', 'knockout', 'knockout-amd-helpers', 'text'], function($, ko) {
    ko.applyBindings({});
});