JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.min.js"></script>
<script type='ractive/template' id='parent'>
    <a href="#/home" on-click='navigate'>home</a>
    <Child/>
</script>
<script type='ractive/template' id='child'>
    <a href="#/section1" on-click='navigate'>section1</a>
 	<a href="#/section2" on-click='navigate'>section2</a>
 	<a href="#/section3" on-click='navigate'>section3</a>
    <hr/>
    {{message}}
</script>

<div id='main'></div>
<div id="result"></div>

JavaScript

/*var ractive = new Ractive({
    template: '#templ',
    el: '#main'
});
*/

/*ractive.on('navigate', function (e) {
    console.log(e.node.hash);
    routr.navigate(e, true, {
        'message': 'New Message',
        'text': 'new Text'
    });
});*/

/*
Ractive.components.home = Ractive.extend({
    template: '#details-message',
    oninit: function () {},
    data: {
        message: 'This is home'
    }
});

Ractive.components.section = Ractive.extend({
    template: '#details-text',
    oninit: function () {},
    data: {
        message: 'This is section'
    }
});
*/

var Router = function () {
    this._routes = {};
};


var paintComponent = function(componentName, el, append, i) {
	new Ractive.components[componentName]({
        el: el,
        append: i ? append: false, // clean up DOM space
    });
};

/*
var applyNavigation = function() {
    var self = this;
    self._ractive.on('navigate', function (e) {
        console.log(e.node.hash);
        self.navigate(e);
    });
}*/

Router.prototype.defRoutes = function (routes) {
	var self = this;
    routes.forEach(function(routeObj) {
       self.defRoute(routeObj); 
    });
};

//http://stackoverflow.com/a/2117523- rfc4122 version 4 compliant solution
function nextUUID () {
 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });   
}

Router.prototype.defRoute = function (route) {
    var self = this;
    
    route.components.forEach(function(component){
       	var uuid = nextUUID();
        console.log(uuid);
        var origOnInit = component.prototype.oninit;
        component.prototype.oninit = function() {
            this.on('navigate', function(e){ 
                console.log(e.node.hash);
                self.navigate(e.node.hash);
            });
            if (typeof origOnInit === 'function') {
                origOnInit();
            }
        };
       //...