JSFiddle - React, Tailwind, and code Playground

by dmazza

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet header}}
    {{outlet main}}
    
    <button {{action goToNext}}>Go to next</button>
    <button {{action goToIndex}}>Go to index</button>
</script>

<script type="text/x-handlebars" data-template-name="header">
    {{view App.ViewAView}}
    {{view App.ViewBView}}
</script>

<script type="text/x-handlebars" data-template-name="main">
    I stay here, no matter what!
</script>

<script type="text/x-handlebars" data-template-name="view-a">
    View A!
</script>

<script type="text/x-handlebars" data-template-name="view-b">
    View B!
</script>

JavaScript

window.App = Ember.Application.create();

    /** VIEWS **/
    App.HeaderView = Ember.View.extend({});
    App.MainView = Ember.View.extend({});
    App.ViewAView = Ember.View.extend({
        templateName: 'view-a'
    });
    App.ViewBView = Ember.View.extend({
        templateName: 'view-b'
    });

    /** ROUTER **/
    App.Router.map(function() {
        this.route('index', {path: '/'});
        this.route('next', {path: '/next'});
    });
    
    /** ROUTES **/
    Ember.Route.reopen({
        events: {
           goToIndex: function () {
                this.transitionTo('index');
           },
           goToNext: function () {
                this.transitionTo('next');
            } 
        }
    });
    
    App.IndexRoute = Ember.Route.extend({
        renderTemplate: function () {
            
            this.render('main', {'outlet':'main', 'into':'application'});
            this.render('header', {'outlet':'header', 'into':'application'});
        }
    });
    
    App.NextRoute = Ember.Route.extend({});