JSFiddle - React, Tailwind, and code Playground

by archange

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/x-handlebars" data-template-name="application">
    {{view App.NavigationView}}
    
    <div class="hero-unit">
      <div class="container">
        <h1>Ember.js</h1>
      </div>
    </div>

    <div class="container">
      <h1>Ember Committers</h1>
      {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="navigation">
  <div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Emberjs POC</a>
        <ul class="nav">
          {{#view view.navItemView item="allTeachers" }}
            <a {{action gotoAllTeachers}} >Teachers</a>
          {{/view}}
          {{#view view.navItemView item="allDisciplines" }}
            <a {{action gotoAllDisciplines }} >Disciplines</a>
          {{/view}}     
        </ul>
      </div>
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="home">Home sweet home</script>
<script type="text/x-handlebars" data-template-name="allTeachers">Show all instructors</script>
<script type="text/x-handlebars" data-template-name="allDisciplines">Show all disciplines</script>

CSS

a {
    cursor: pointer;
}

JavaScript

$(function() {

    App = Ember.Application.create({
      ready: function() {
      }
    });
    
    App.ApplicationController = Ember.Controller.extend();
    App.ApplicationView = Ember.View.extend({
      templateName: 'application'
    });
    
    //---- Navigation
    App.NavigationController = Ember.Controller.extend({
      itemChanged: function() {
        // this is an inline version of .addObserver
        console.log("item changed");
      }.observes('selected')
    
    });
    App.NavigationView = Ember.View.extend({
      templateName: 'navigation',
      selectedBinding: 'controller.selected',
      navItemView: Ember.View.extend({
        tagName: 'li',
        classNameBindings: 'isActive:active'.w(),
        isActive: function() {
          console.log('isActive' + this.get('item') === this.get('parentView.selected'));
          return this.get('item') === this.get('parentView.selected');
        }.property('item', 'parentView.selected'),
        
        pvSelectedChanged: function() {
          // this is an inline version of .addObserver
          console.log("isActive changed");
        }.observes('parentView.selected')
        
      }),
      
      selectedChanged: function() {
        // this is an inline version of .addObserver
        console.log("selected changed");
      }.observes('selected')
      
    });
    
    
    App.HomeController = Ember.Controller.extend();
    App.HomeView = Ember.View.extend({
      templateName: 'home'
    });
    
    //---- All Teachers
    App.AllTeachersController = Ember.ArrayController.extend();
    App.AllTeachersView = Ember.View.extend({
      templateName: 'allTeachers'
    });
    
    //---- All Disciplines
    App.AllDisciplinesController = Ember.ArrayController.extend();
    App.AllDisciplinesView = Ember.View.extend({
      templateName: 'allDisciplines'
    });
    
    App.Router = Ember.Router.extend({
      enableLogging: false,
      location: 'hash',
      
      root:...