Ember how to just add additional named outlets to view without disturbing the normal behaviour

Question

I'm trying to render in my index page three additional outlet's, everything works fine, except that once I set up at least one outlet, the normal behaviour get interrupted. To be more clear here is what I'm doing

My IndexRoute route

renderTemplate: function() {
    this._super();
    this.render('header', { into: 'index', outlet: 'header' });
    this.render('sidebar', { into: 'index', outlet: 'sidebar' });
    this.render('right_side', { into: 'index', outlet: 'right_side' });
}

Now my routes are mapped so index is a resource and contains all other routes inside. My view contains all outlet's setted to render and one unnamed outlet, which causes a problems.

If I do not explicitly name what to render and where in IndexRoute, things work fine, I get my template rendered in my unnamed outlet, links work fine and unnamed outlet get the right content, but once I set up any named outlet, the unnamed outlet stops getting any content, though I'm calling _super().

So my question is how can I set up additional named outlets without disturbing normal work of unnamed outlet in the same resource?

Update

example http://jsfiddle.net/drulia/jM6js/

Answer 1

I'm not really sure what the issue is with multiple outlets, but I got it to work using partial helper.

<script type="text/x-handlebars" data-template-name="index">
 {{#linkTo index/foo}}Go to Foo{{/linkTo}} <br>
 {{#linkTo index/bar}}Go to Bar{{/linkTo}} <hr>
 text inside index template
 <hr>
 {{outlet}}
 {{render "sidebar"}}
</script>

Here's a jsfiddle.

Update

jsfiddle was updated to use {{render}} helper instead of {{partial}}.

If you're using {{partial}} helper, it will use existing context. If you need to reuse models/controllers, you're better of using {{render}} because it creates a new view/controller/template context for you. Then you might use modelFor or controllerFor hooks.