How template rendering renders custom templates at points defined in the default template used by the route.

Question

I have a scenario in which on a specific route I have two exits and on the same route I want to show two different templates at two different points.

Detailed template:

<script type="text/x-handlebars" data-template-name="details"> Details Template {{#linkTo "index"}}Home{{/linkTo}} <hr/> <h4>DETAILS</h4> <hr/> <div class='outletArea'> {{outlet "detailsList"}} </div> <hr/> <div class='outletArea'> {{outlet "detailsMatrix"}} </div> </script> 

The route is defined as:

 App.DetailsRoute = Ember.Route.extend({ renderTemplate: function () { this._super();//to render the details temlate whch has outlets this.render('detailsList', { outlet: 'detailsList' });//render the list in list outlet this.render('detailsMatrix', { outlet: 'detailsMatrix' });//rendet the matrix in matrix outlet } }); 

But these two patterns do not get visualization at these two points, but get them directly in the root element.

The script for my study http://jsfiddle.net/anshulguleria/eCTtu/

As in jsfiddle, I wanted these two temlates to appear in gray areas. Thus, when viewing a link, my rendered templates are not deleted or displayed again and again.

Answer 1

Your details route is at the top level, so when you call render in its renderTemplate function without specifying the into option, it tries to find these outputs in the top-level template (i.e., in application ). You can see it in this JSFiddle .

If you were in a nested route, it searches for them in the parent template (AFAIK).

Therefore, you just need to add the into parameter as follows:

 this.render('detailsList', { outlet: 'detailsList', into: 'details' }); this.render('detailsMatrix', { outlet: 'detailsMatrix', into: 'details' }); 

And it works!

EDIT

It looks like Ember is expecting an application pattern with {{outlet}} . This seems to be a bug in Ember, I think you can post the question on github.

I added the link above to add the application template.