JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/x-handlebars" data-template-name="application">
 <h1>Hi Laps</h1>
 {{outlet loga}}
 {{outlet }}
  <a href="#" {{action showLogin }}> go to root.logon.index state</a>   
  <br>
  <a href="#" {{action anotherWay}} >it works to go to root longon index using this</a>
</script> 

<br>
<script type='text/x-handlebars' data-template-name='home'> 
</script>
<br>
<script type="text/x-handlebars" data-template-name="logging">
 
  {{view  Ember.TextField placeholder="what" class="userInput"  }}
    {{outlet loga}}
    <br>
    <b> Inserted from Login controller and view </b>
        
</script>

<script type="text/x-handlebars" data-template-name="sub_section_b_view">
    
    <b>Inserted from the subsection controller and view </b> 
     
</script>

<script type='x-handlebars' data-template-name='section A' >
    
</script>


<script type='x-handlebars' data-template-name='section B' >
    
</script>

JavaScript

App = Ember.Application.create();

// A mixin to define a property used to render the navigation. Returns
// true if a state with the specified name is somewhere along the current route.


App.stateFlag = Ember.Mixin.create({
    stateFlag: function(name) {
        var state = App.get('router.currentState.name'); 

        while (state.name === name) {
            //the statement block below is executed while conditional expression evaluates to true
            state = state.get('parentState');
            console.log('state');
            //return true;
        }
    }.property('App.router.currentState')
});


App.ApplicationController = Em.Controller.extend();

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

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

App.LoginView = Ember.View.extend({
    tagName: 'form',
    templateName: 'logging',
    /* class name does not work */
    className: ['userInput']
});

App.SectionController = Em.ObjectController.extend(App.stateFlag, {
    //stateFlag: 'sectionA',
    stateFlag: 'sectionB'
});

App.SectionView = Ember.View.extend({
    templateName: "sub_section_b_view"
});

App.SectionA = Em.ObjectController.extend();
App.SectionAView = Ember.View.extend({
    templateName: "section A"
});

App.SectionB = Em.ObjectController.extend();
App.SectionBView = Ember.View.extend({
    templateName: "section B"
});

App.Router = Ember.Router.extend({
    enableLogging: true,
    location: 'hash',
    root: Ember.Route.extend({

        anotherWay: Ember.Router.transitionTo('root.logon.index'),

        showLogin: function(router, event) {
            router.transitionTo('root.logon.index');
        },
        
        doHome: function(router, event) {
        router.transitionTo('home');
      },
        doSections: function(router, event) {
       ...