Ember.js rendering named outlet destroys default outlet's contents

Question

Working off the TodoMVC tutorial, I added a details field to the todo model, which I want to show elsewhere on the page when I click on a Todo. The issue occurs when I click on this linkTo in the todos/index template

{{#linkTo 'todo' this}}{{title}} {{/linkTo}}

I want this to render to a named outlet called "details" in the todos route, while leaving the default outlet alone (because that is where todos/index is rendered). The issue is that the todo template renders to the correct outlet, but it also destroys all the content previously in todos's default outlet. I'm not sure why it is destroying the old outlet's contents since I specify the correct content in the route.

My current router looks like this:

Todos.Router.map(function () {
this.resource('todos', { path: '/' }, function () {
    this.route('active');
    this.route('completed');
    this.resource('todo', {path: ':todo_id'});
    });

});

and my TodoRoute is here

Todos.TodoRoute = Ember.Route.extend({
renderTemplate: function()  {
    this.render( {
        outlet: "details",
        into: "todos"
    });
  }
})

Michael Johnston Michael Johnston · Accepted Answer · 2013-09-27T13:45:50

As far as I can tell there isn't a way to have sibling routes that don't destroy each other except by not having any {{outlet}} in their parent route's template, and rendering them all with {{render}}. Then in their routes you ignore the renderTemplate hook and use model or setupController to set properties on controllers higher in the hierarchy that the {{render}} helpers use to specify which record is to be rendered.

Ember.js rendering named outlet destroys default outlet's contents

2 Answers