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 type="text/x-handlebars" data-template-name="application">
 <h1>Hi Laps</h1>
 {{outlet mine}}
 {{outlet }}
</script> 

<br/>
<p><b>help</b></p>

<script type="text/x-handlebars" data-template-name="logging">
 
  {{view  Ember.TextField placeholder="what" class="userInput"  }}
 {{outlet mine }}
</script>

JavaScript

App = Ember.Application.create();

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

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

App.LoginController = Em.ObjectController.extend();

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


App.Router = Ember.Router.extend({
  enableLogging:  true,
  location: 'hash',
  root: Ember.Route.extend({
      
      showLogin: Ember.Route.transitionTo('root.logon'),
      
      index:  Ember.Route.extend({
          route:  '/',

          connectOutlets:  function(router){
          router.get('applicationController').connectOutlet('login');
        }
         
        }),
      
      logon:  Ember.Route.extend({
        route: '/login',
        enter: function ( router ){
          console.log("The login sub-state was entered.");
        },
        connectOutlets:  function(router, context){
          router.get('applicationController').connectOutlet( 'login');
        },
          
       showLogon: Ember.Route.transitionTo('logon.index'),
         
       index: Ember.Route.extend({
        route: '/',
           connectOutlets: function(router) {
          router.get('applicationController').connectOutlet('mine', 'login');
        }
      })          
        
  })
      
  })  
    
});