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}}
        <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({});


App.AddressController = Ember.ObjectController.extend({
    city: function(){
        return "San Francisco";
    }.property()
});
App.AddressesController = Ember.ArrayController.extend({
    itemController: 'address'
});

App.IndexController = Ember.ObjectController.extend({    
    addresses: App.AddressesController.create({
        content: [
            App.Address.create({'line1': '123 First Ave'}),
            App.Address.create({'line1': '234 Second Ave'})
        ]})
});