Array controller with item controller

The latest build of Ember.

by Jeremy Gillick

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
     <h2>Index Content:</h2>
    <p>
        Length: {{addresses.length}}
    </p>
    <ul>
    {{#each addresses itemController="address"}}
        <li>{{line1}}, {{city}}</li>
    {{/each}}
    </ul>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; }
li { padding: 5px 0; }

JavaScript

App = Ember.Application.create({});
App.Address = Ember.Object.extend({});

// Addresses array controller
App.AddressesController = Ember.ArrayController.extend({
    //itemController: 'address'
});

// Address object controller
App.AddressController = Ember.ObjectController.extend({
    city: function(){
        return "San Francisco";
    }.property()
});

App.IndexController = Ember.ObjectController.extend({    
    addresses: null
});
App.IndexRoute = Ember.Route.extend({
    setupController: function(indexController){
        var addresses = App.AddressesController.create({
            content: [
                App.Address.create({'line1': '700 Hansen Wy'}),
                App.Address.create({'line1': '900 Hansen Wy'})
            ]
        });
        indexController.set('addresses', addresses);
    }
});