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>
    <br>
      <a href='#' {{action doSection}}> testing sections</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> 
    <a href='#' {{action doSectionA}}><p>Sub section  yea</p></a>
    <br>
     <a href='#' {{action doSectionB}}> our B part yep</a>
    
    {{outlet}}
</script>

<script type='text/x-handlebars' data-template-name='sectionA' >
    <br>
    <font color="red">my section a is working</font>
</script>


<script type='text/x-handlebars' data-template-name='sectionB' >
     <font color="orange">my section b is working</font>
</script>

JavaScript

App = Ember.Application.create({
    ready: function(){ 
    //App.router.transitionTo('root.home');
    }
});

// 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.SectionAController = Em.ObjectController.extend();
App.SectionAView = Ember.View.extend({
    templateName: "sectionA"
});

App.SectionBController = Em.ObjectController.extend();
App.SectionBView = Ember.View.extend({
    templateName: "sectionB"
});

//NESTING attempt

App.SectionARoute = Ember.Route.extend({
      connectOutlets: function(router, context) {
       router.get('sectionController').connectOutlet({viewClass: App.SectionAView}); 
       }                  
 });
 
App.SectionBRoute = Ember.Route.extend({
     connectOutlets: function(router, context) {
     ...