JSFiddle - React, Tailwind, and code Playground

by mgrassotti

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="loading">
</script>
<script type="text/x-handlebars" data-template-name="application">
LOADING? {{App.version}}
{{#if App.version}}
    <img src="http://devcomponents.com/blog/wp-content/uploads/ajax-loader-1.gif" />
{{else}}
    <header>
        <h1>Ember Router Sample</h1>
        <nav>
            <a {{action "goHome" href=true}}>home</a> 
            <a {{action "goBlog" href=true}}>blog</a> 
        </nav>
    </header>
    {{outlet}}
    <footer></footer>
{{/if}}
</script>

<script type="text/x-handlebars" data-template-name="home">
    <p>Hello World !</p>
</script>

<script type="text/x-handlebars" data-template-name="blog">
    <p>Listes d'articles!</p>
</script>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
header nav a {
    color: #008Bff; cursor: pointer;
}
p {
    padding: 20px;
}

JavaScript

var App = Ember.Application.create({
    ready: function() {
        this.set('version', '1.0.1');
        return this.initialize();
    }
});

        
App.ApplicationController = Ember.Controller.extend(); 
App.ApplicationView = Ember.View.extend({
    templateName: "application"
}); 

App.LoadingController = Ember.Controller.extend(); 
App.LoadingView = Ember.View.extend({
    templateName: "loading"
});  


App.HomeController = Ember.Controller.extend(); 
App.HomeView = Ember.View.extend({
    templateName: "home"
});  
 
App.BlogController = Ember.Controller.extend(); 
App.BlogView = Ember.View.extend({
    templateName: "blog"
});  

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        goHome: Ember.State.transitionTo('loading'),         
        goBlog: Ember.State.transitionTo('blog'), 
        connectOutlets: function(router, context) {
//            console.log('in loading');
//            this._super(router.context);
//            router.transitionTo('home');
            console.log(App);
            console.log('transition to home called');
            
//            console.log(router.getPath('currentState.name'));
//            console.log(Em.inspect(router));
//            $('#app-loading').hide();
            // transition.async();
//            $('#app-loading').fadeOut('slow', function() {
//               console.log('ok it is gone');
                //transition.resume();
//            });
        },
        loading: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('loading');
            }
        }),
        home: Ember.Route.extend({
            route: "/home",
            enter: function(router, context) {
              console.log('home.enter');
            },
            connectOutlets: function(router, context) {            
               ...