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="home">
  Welcome to my application!
</script>
<script type="text/x-handlebars" data-template-name="profile">
  Check out my profile!
  <ul>
    <li><a {{action viewPosts}}>Posts</a></li>
    <li><a {{action viewPhotos}}>Photos</a></li>
  </ul>
  {{outlet section}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
  Viewing posts...
</script>
<script type="text/x-handlebars" data-template-name="photos">
  Viewing photos...
</script>
<script type="text/x-handlebars" data-template-name="navbar">
  <ul>
    <li><a {{action goHome}}>Home</a></li>
    <li><a {{action viewProfile}}>My Profile</a></li>
  </ul>
</script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>My Ember Application</h1>
  {{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
  <div class="content">
    {{outlet}}
  </div>
</script>

CSS

body {
  padding: 2em;   
}

h1 { font-size: 2em; }

a {  
  color: blue;
  cursor: pointer;
}

.content {
  padding: 1em;   
}

JavaScript

App = Em.Application.create();

// Instantiated and wired up for you in App.initialize()
App.ApplicationController = Em.Controller.extend();
App.ApplicationView       = Em.View.extend({ templateName: 'application' });
App.NavbarController  = Em.Controller.extend();
App.NavbarView        = Em.View.extend({ templateName: 'navbar' });
// Your stuff
App.HomeController    = Em.Controller.extend({});
App.HomeView          = Em.View.extend({ templateName: 'home' });

App.ProfileController = Em.Controller.extend({});
App.ProfileView       = Em.View.extend({ templateName: 'profile' });

// Nested views in the profile
App.PostsController = Em.Controller.extend({});
App.PostsView       = Em.View.extend({ templateName: 'posts' });

App.PhotosController = Em.Controller.extend({});
App.PhotosView       = Em.View.extend({ templateName: 'photos' });

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',
    
  root: Em.State.extend({
    // EVENTS
    goHome: Ember.State.transitionTo('home'),
    viewProfile: Ember.State.transitionTo('profile'),
    
    // STATES
    home: Em.State.extend({
      route: '/',
      connectOutlets: function(router, context) {
        var appController = router.get('applicationController');
        //appController.connectOutlet('navbar', App.NavbarView);
        appController.connectOutlet(App.HomeView);
      }
    }),
      
    profile: Em.State.extend({
      route: '/profile',
      connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet(App.ProfileView);
      },
        
      // EVENTS
      viewPosts: Ember.State.transitionTo('posts'),
      viewPhotos: Ember.State.transitionTo('photos'),
      
      // STATES
      posts: Em.State.extend({
        route: '/posts',
        connectOutlets: function(router, context) {
          router.get('profileController').connectOutlet('section', App.PostsView);
        }
      }),
      
      photos: Em.State.extend({
        route:...