Ember.js Base fiddle

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name='app'>
    <h2>Main app view</h2>       
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="other">
    
    <table>
        <tr>
            <th>
                <!-- XXX: How do I bind the "for" attribute correctly? -->
                <label {{bindAttr for="view.curUser.elementId"}}>Current User</label>
            </th>
            <td>    
                {{view Ember.TextField valueBinding="current_user.first_name" viewName="curUser"}}   
            </td>
        </tr>
    </table>

    
</script>

CSS

td {
  padding: 5px;   
}
th {
  padding: 5px;    
}
h2 {
  font-size: 1.5em;
  font-weight: bold;    
}

JavaScript

App = Ember.Application.create({
    User: Ember.Object.extend({
        first_name: null,
        last_name: null,
        id: null
    }),

    ApplicationController: Ember.Controller.extend({
        init: function() {
            this._super();
            this.set('current_user', App.User.create({
                first_name: 'Milo',
                last_name: 'Otis',
                id: 7
            }))
        },

        current_user: false
    }),
    ApplicationView: Ember.View.extend({
        templateName: 'app',

    }),

    OtherController: Ember.Controller.extend({
        current_user: function() {
            return App.router.getPath('applicationController.current_user');
        }.property('applicationController.current_user')
    }),

    OtherView: Ember.View.extend({
        templateName: 'other',
    }),

    Router: Ember.Router.extend({
        location: Ember.Location.create({
            implementation: 'hash'
        }),
        root: Ember.Route.extend({
            showMain: function(router, event) {
                router.transitionTo('main', event.context)
            },
            main: Ember.Route.extend({
                route: '/',
                connectOutlets: function(router, event) {
                    router.get('applicationController').connectOutlet('other');
                }
            }),
        })
    })
});
App.location = Ember.Location.create({
    implementation: 'hash'
})

App.initialize()
window.App = App