Ember.js Binding to ArrayController

This example shows how you can bind views to objects at specific indexes in an ArrayController.

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.1.js"></script>
<script type="text/x-handlebars" >
    <div class="tab-content" ></div>
</script>

<script type="text/x-handlebars" data-template-name="template-0" >
    first tab
    <p>{{content.name}} {{content.age}}</p>
</script>
<script type="text/x-handlebars" data-template-name="template-1" >
    second
    <p>{{content.name}} {{content.age}}</p>
</script>

CSS

.tab-content {
    border: thin solid black;
}


ul
{
  margin:20px;
}

li {
    cursor: pointer;
    display:inline-block;
    border:1px solid gray;
    margin:10px;
}

JavaScript

App = Ember.Application.create({});

App.obj1 = Ember.Object.create({
    name: 'Rajat Mittal',
    age: 27
});

App.obj2 = Ember.Object.create({
    name: 'John Miller',
    age: 24
});

App.controller = Ember.ArrayProxy.create({content: []});
App.controller.pushObject(App.obj1);
App.controller.pushObject(App.obj2);

App.templateView = Ember.View.extend({
    objectIndex:null,
    templateName:function(){
        var objectIndex = this.get('objectIndex');
        return 'template-' + objectIndex;
    }.property().cacheable(),
    targetObject: function(){
        var objectIndex = this.get('objectIndex');            
        var controller = this.get('controller');
        if (controller) {
            return controller.objectAt(objectIndex);
        }
        return null;
    }.property('controller', 'objectIndex').cacheable(),
    controllerBinding:'App.controller',
    contentBinding:'targetObject'
});

App.stateManager = Ember.StateManager.create({
    rootElement: '.tab-content',
    initialState: 'firstTab',
    firstTab: Ember.ViewState.extend({
        view: App.templateView.create({
            objectIndex: 0
        }),
        
        exit: function(stateManager, transition) {
            transition.async();
            this.get('view').$().fadeOut('slow', function() {
                transition.resume();
            });
        }
    }),
    secondTab: Ember.ViewState.extend({
        view: App.templateView.create({
            objectIndex: 1
        })
    })
});

setTimeout(function(){
    App.stateManager.goToState('secondTab');
},2000);