JSFiddle - React, Tailwind, and code Playground

by ppanagi

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="home">
    <h1><b>Async Routing Example</b></h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="yapp">
    <h2>Yapp: {{name}}</h2>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="page">
    <h3>Page: {{name}}</h3>
</script>

CSS

div {
    text-align:center;
    margin-top:30px;
    font:20px/24px helvetica;
}

JavaScript

var App = Ember.Application.create();
App.ApplicationView = Em.View.extend({
    templateName: 'home'
});
App.ApplicationController = Em.Controller.extend();
App.YappController = Em.ObjectController.extend();
App.YappView = Em.View.extend({
    templateName: 'yapp'
});
App.PageController = Em.ObjectController.extend();
App.PageView = Em.View.extend({
    templateName: 'page'
});
App.Store = DS.Store.extend({
    revision: 4,
    adapter: Em.Object.create({
        find: function(store, type, id) {
            if (type === App.Yapp) {
                Em.run.later(function(){
                    store.load(App.Page, { id: 7, name: 'Schedule' });
                    store.load(App.Yapp, { id: id, name: 'Ember NYC' });
                }, 1500);
            } else if (type === App.Page) {
                throw "Expected page to be loaded already.";
            }
        }
    })
});
App.Yapp = DS.Model.extend({
    name: DS.attr('string')
});
App.Page = DS.Model.extend({
    name: DS.attr('string')
});

App.Router = Em.Router.extend({
    location: 'hash',
    root: Em.Route.extend({
        loading: Em.State.extend({}),
        yapp: Em.Route.extend({
            route: '/yapps/:yapp_id',
            deserialize: function(router, params){
                yapp = this._super(router, params);
                deferred = $.Deferred();
                yapp.one('didLoad', function(){
                    deferred.resolve(yapp);
                });
                return deferred.promise();
            },
            connectOutlets: function(router, yapp) {
                router.applicationController.connectOutlet('view', 'yapp', yapp);
            },
            page: Em.Route.extend({
                route: '/pages/:page_id',
                connectOutlets: function(router, page) {
                    router.yappController.connectOutlet('view', 'page', page);
                },
            })
        })
    })
});
App.initialize();