JSFiddle - React, Tailwind, and code Playground

by Abdull

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script>
<body>
    
    <!-- Also OK:
    <script type="text/x-handlebars"> -->
    <script type="text/x-handlebars" id="application">
        This is application template.<br/>
        Here is the applicationMessage: {{applicationMessage}}<br/>
        {{#linkTo "deeper"}}Select deeper route{{/linkTo}}<br/>
        {{outlet}}
    </script>

    <script type="text/x-handlebars" id="index">
        This is index template.<br/>
        Here is the indexMessage: {{indexMessage}}<br/>
        {{#linkTo "about"}}Select about route{{/linkTo}}<br/>
        {{outlet}}
    </script>
    
    <script type="text/x-handlebars" id="about">
        This is about template.<br/>
        Here is the aboutMessage: {{aboutMessage}}<br/>
        {{#linkTo "deeper"}}Select deeper route{{/linkTo}}<br/>
        {{outlet}}
    </script>
    
    <script type="text/x-handlebars" id="deeper">
        This is deeper template.<br/>
        Here is the deeperMessage: {{deeperMessage}}<br/>
        {{#linkTo "index"}}Select index route{{/linkTo}}<br/>
        {{outlet}}
    </script>
</body>

JavaScript

Ember.LOG_BINDINGS = true;

App = Ember.Application.create();


App.Router.map(function () {
    this.resource("about", function() {
        this.resource("deeper");
    });
});


/* That's not how it's done
App.ApplicationController.reopenClass({
    applicationMessage: "This is an application message"
});
*/

/* That's not how it's done
App.ApplicationController = Ember.ObjectController.extend({
    applicationMessage: "This is an application message"
});
*/

// That's how it's done
App.ApplicationController = Ember.Controller.extend({
    applicationMessage: "This is an application message"
});

// IndexController get's used as the controller for the "default" {{outlet}}
App.IndexController = Ember.ObjectController.extend({
    indexMessage: "This is an index message"
});

App.AboutController = Ember.ObjectController.extend({
    aboutMessage: "This is an about message"
});

App.DeeperController = Ember.ObjectController.extend({
    deeperMessage: "This is a deeper message"
});