CODEWITHSUNDEEP
ember.jshandlebars.js
guleria
guleria

Reputation: 751

How does render template render the custom templates into the outlets defined in the default template used by a route.

I have a scenario in which in a specific route i have two outlets and in the same route i want to show two different templates in two different outlets.

Details 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>

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 those two template are not getting rendered in those two outlets rather they get rendered in the root element directely.

Fiddle for my proble is http://jsfiddle.net/anshulguleria/eCTtu/

As in jsfiddle i wanted these two temlates to get rendered in the grey areas. Thus when going through the link my rendered templates are not removed and rendered again and again.

Upvotes: 7

Views: 4599

Answers (1)

lcoq
lcoq

Reputation: 10726

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

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

Consequently, you just have to add the into option like this:

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

And it works!

EDIT

It looks like Ember expect to have an application template that has an {{outlet}}. It seems to be a bug in Ember, I think you can post an issue in github.

I've updated the link above to add an application template.

Upvotes: 9

Related Questions