Multiple controllers one page

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>
    
    <h3>Object Controller</h3>
    {{one.foo}}

    <hr>
        
    <h3>Array Controller</h3>
    <p>
        Length: {{addresses.length}}
    </p>
    <ul>
    {{#each addresses}}
        <li>{{line1}}</li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="templateOne">
  Template One: {{foo}}
</script>
<script type="text/x-handlebars" data-template-name="templateTwo">
  Template Two: {{foo}}
</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({  // Ember.Model...
  line1: '',
  line2: '',
  town: '',
  postalCode: '',
  country: '',
  state: ''
});

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

App.OneController = Ember.ObjectController.extend({
    content: {}
});
App.AddressesController = Ember.ArrayController.extend({});