JSFiddle - React, Tailwind, and code Playground

by brianjmiller

HTML

<script id="homepage-tmpl" type="text/x-handlebars-template">
    <div>
        <div id="menu">menu</div>
        <div id="content"></div>
    </div>
</script>

CSS

#menu {
    padding: 10px;
    margin: 10px;
    border: 1px solid red;
}

#content {
    padding: 10px;
    margin: 10px;
    border: 1px solid green;
}

JavaScript

YUI().use('app', 'handlebars', function (Y) {
    Y.FirstView = Y.Base.create('firstView', Y.View, [], {
        render: function () {
            Y.log('render first view');
            
            this.get('container').setHTML('first view here<br>' + new Date());
            
            return this;
        }
    });

    Y.SecondView = Y.Base.create('secondView', Y.View, [], {
        render: function () {
            Y.log('render second view');
            
            this.get('container').setHTML('second view here<br>' + new Date());
            
            return this;
        }
    });
    
    Y.MenuView = Y.Base.create('menuView', Y.View, [], {
        render: function () {
            Y.log('render menu view');
            
            this.get('container').setHTML('<a href="/first">first</a><br><a href="/second">second</a><br>' + new Date());
            
            return this;
        }
    });
    
    Y.HomePageView = Y.Base.create('homePageView', Y.View, [], {
        template: Y.Handlebars.compile(Y.one('#homepage-tmpl').getHTML()),

        initializer: function () {
            
        },

        render: function () {
            Y.log('render homepage view');
            var container = this.get('container');

            container.setHTML(this.template());
            container.one('#menu').setHTML(new Y.MenuView().render().get('container'));
            
            return this;
        }
    });

    Y.MyApp = Y.Base.create('myapp', Y.App, [], {
        serverRouting: false,

        views: {
            firstView: {type: 'FirstView'},
            secondView: {type: 'SecondView'}
        },
        
        initializer: function () {
            this.initRoute();
        },
        
        initRoute: function (e) {
            this.once('ready', function (e) {
                if (this.hasRoute(this.getPath())) {
                    this.dispatch();
                } else {
                    this.replace('/')
                }
   ...