JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<!-- core/layout/tmpl/3-col.js -->
<div id="wrapper">
    <header>{{ this.getChild('menu') }}</header>
    <div id="body">
        <aside id="right">{{ this.getChild('right') }}</aside>
        <aside id="left">{{ this.getChild('left')</aside>
        <section id="main">{{ this.getChild('main') }}</section>
    </div>
    <footer>{{ this.getChild('footer') }}</footer>
</div>

<!-- core/template/tmpl/main.js -->
{{ this.getChildren() }}


<!-- twitter/feed/tmpl/feed.js -->
{{ for(tweet in this.get('tweets')) }}
<div class="tweet">
    <p>{{ tweet.message }}</p>
</div>    
{{ endfor }}

JavaScript

App.Route('/', function(){
    new Block('core::layout',{
         template:'core/layout/tmpl/3-col.js'
        ,target:'
        ,children:{
             menu: new Block('core::menu',{
                 module:{
                     links:['somehow define a link','another link]
                }
                ,children:{
                    login: new Block('auth::login',{
                        template: 'auth/login/tmpl/mini.js'
                    }
                }
            })

            ,left: new Block('core::template',{
            
            })
                
            ,right: new Block('core::template',{
            
            })
                
            ,main: new Block('core::template',{
                template:'core/template/tmpl/main.js'
                children:{
                    twitter: new Block('twitter::feed',{
                        // module config
                        module:{user: 'jiggliemon'}
                        // this will be an override to the default set 
                        // within the twitter/feed module
                        template:'twitter/feed/tmpl/feed.js'
                    }
                    google: new Block('google::search',{
                        // module config
                        module:{term: 'lolcats'}
                        // this will be an override to the default set 
                        // within the twitter/feed module
                        template:'google/search/tmpl/list.js'
                    }
                }
            })

            ,footer: new Block('core::template',{
            
            })
        }
    });
});