JSFiddle - React, Tailwind, and code Playground

by pjmorse

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="application">
<div class='container'>
    <h1>Application</h1>
    <p class="debug"><strong>controller:</strong> {{controller}}</p>
    {{outlet navigation}}
    {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="navigation">
    <h2>Navigation</h2>
   <p class="debug"><strong>controller:</strong> {{controller}}</p>
   <ul>
    <li><a {{action goHome}}>Home</a></li>
    <li><a href="#google">(not actually) Google</a></li>
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="home">
    <div class="container">
    <h2>Welcome Home</h2>
    <p class="debug"><strong>controller:</strong> {{controller}}</p>
</div>
</script>

CSS

body { color: #5F5050;  }

a {
    cursor: pointer;
    text-decoration: underline;
}

.container {
    border: solid 1px #825;
    padding: 0.5em; 1em;
}

.debug {
    color: #555;
    font-size: 0.8em;
}

JavaScript

App = Ember.Application.create();

/*
 * Application
 */
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

/*
 * Navigation
 */
App.NavigationController = Ember.Controller.extend({});
App.NavigationView = Ember.View.extend({
    templateName: 'navigation'
});

/*
 * Home
 */
App.HomeController = Ember.Controller.extend({});
App.HomeView = Ember.View.extend({
    templateName: 'home'
});

/*
 * Routing
 */
App.Router = Ember.Router.extend({

    goHome: Ember.State.transitionTo('root'),

    root: Ember.State.extend({

        connectOutlets: function(router, context) {
            console.log('root.home.connectOutlets');
//            var appController = router.get('applicationController');
//            appController.connectOutlet(App.HomeView);
//            router.get('navigationController').connectOutlet('navigation', App.NavigationView);        }
    })
});

App.initialize();