Multiple outlets in a template

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>
  <div>{{outlet firstSection}}</div>
  <div>{{outlet secondSection}}</div>
  <div>{{outlet thirdSection}}</div>
</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 { border-bottom: 1px solid #333; padding: 5px 0; }

JavaScript

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

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function(){
        this.render();
        this.render('templateOne', {
                    outlet: 'firstSection', 
                    into: 'index'
                });
        this.render('templateTwo', {
                    outlet: 'secondSection',
                    into: 'index'
                });
        this.render('templateOne', {
            outlet: 'thirdSection', 
            into: 'index', 
            controller: 'templateOnePlus'});
    }
});

App.TemplateOneController = Em.ObjectController.extend({
    content: {
        'foo': 'bar'
    }
});
App.TemplateOnePlusController = Em.ObjectController.extend({
    content: {
        'foo': 'even better!'
    }
});
App.TemplateTwoController = Em.ObjectController.extend({
    content: {
        'foo': 'bazz'
    }
});