outlets in ember are contextual to the currently active route.
If you have the following application template
<div id="topbar">
{{ outlet 'topbar' }}
</div>
<div id="content">
{{ outlet }}
</div>
<div id="botbar">
{{ outlet 'botbar' }}
</div>
You could clean up your repeatitive code by moving it into the ApplicationRoute
App.ApplicationRoute = Ember.Route.extend({
renderTemplate: function(){
this._super.apply(this, arguments);
this.render('topbar',{outlet: 'topbar', into: 'application'})
this.render('botbar',{outlet: 'botbar', into: 'application'})
}
})
Now you can have the following index template
<div id="index">
<div id="left">
{{ outlet "left" }}
</div>
<div id="content">
{{ outlet }}
</div>
<div id="right">
{{ outlet 'right' }}
</div>
</div>
You need to clarify which context the outlet is located in by rendering "into" it.
App.IndexRoute = Ember.Route.extend({
renderTemplate: function(){
this._super.apply(this, arguments);
this.render('right',{outlet: 'right', into: 'index'})
this.render('left',{outlet: 'left', into: 'index'})
}
})