JSFiddle - React, Tailwind, and code Playground

by rlivsey

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">
    <h1>My Ember Application</h1>
    
    <div class="navigation">
        <a {{action goHome}}>Home</a>
        <a {{action viewPost}}>Post</a>
    </div>
    
    {{outlet subNavigation}}
    
    <p class="info">
       How to disconnect an outlet on leaving a section?
        Should this be done in `exit` or should there be an equivalent to `connectOutlets`?
    </p>    
    
    <p class="info">    
        Eg, click "post" above and we add sub-navigation to the application view.
        
        Leaving the post section by going back home should then remove this sub navigation as we can't guarantee that it'll 
        get set to anything else otherwise. (unless in the root connectOutlets we set it to null?)
    </p>

    <div class="content">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="sub-navigation">
    Sub nav: <a {{action viewComments}}>Post/comments</a>
</script>
        
<script type="text/x-handlebars" data-template-name="home">
  <h2>Home</h2>
</script>

<script type="text/x-handlebars" data-template-name="post">
  <h2>A Post</h2>
   
    <a {{action viewComments}}>Post/comments</a>
    
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="comments">
    <p>Comments would go here</p>
</script>

CSS

body {
  padding: 2em;   
}

h1 { font-size: 2em; }

a {  
  color: blue;
  cursor: pointer;
}

.content {
  padding: 1em;   
}

.info {
    padding-top: 1em;
}


.navigation {
    border-bottom: 1px solid #CCC;
    padding: 1em;
}

JavaScript

App = Em.Application.create();

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

App.HomeView = Em.View.extend({templateName: 'home' });

App.PostController = Em.Controller.extend();
App.PostView       = Em.View.extend({ templateName: 'post' });

App.SubNavView     = Em.View.extend({ templateName: 'sub-navigation', classNames: ["navigation", "sub-navigation"] });
App.SubNavController = Em.Controller.extend();

App.CommentsController = Em.Controller.extend();
App.CommentsView       = Em.View.extend({ templateName: 'comments' });

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    
    root: Em.State.extend({
         // EVENTS
        goHome: Ember.State.transitionTo('home'),
        viewPost: Ember.State.transitionTo('post'),
        viewComments: Ember.State.transitionTo('post.comments'),
      
        // STATES
        home: Em.State.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet(App.HomeView);
            }
        }),
      
        post: Em.State.extend({
            route: '/post',
            connectOutlets: function(router, context) {
                var appController = router.get('applicationController');
                appController.connectOutlet(App.PostView);
                appController.connectOutlet("subNavigation", App.SubNavView);                
            },
            
            // need to remove the sub-navigation when we leave this state
            exit: function(router, context) {
                router.get('applicationController').set("subNavigation", null);
                this._super(router, context);
            },
          
            comments: Em.State.extend({
                route: '/comments',
                connectOutlets: function(router, context) {
                   ...