Ember.js: Inserting child resource's view into the main application's outlet

Question

By default Ember inserts the view of a child resource into an {{outlet}} defined by a view of a parent resource. How do I override that ? i.e. insert the child view in the {{outlet}} defined by the application view. Why is this the default?

Usecase: There is a users resource, with a new route inside it. I want the new to show in the applications {{outlet}} rather than the parent resource's {{outlet}}.

App.Router.map(function(){
  this.resource('users', function(){
     this.route('new');
  });
});

Answer 1

For each route we have a renderTemplate method that we can overload. This gives us full control over the rendering of the views.

For example, we can specify into which {{outlet}} the view will render with into:

(I assume this is your use case, but I'm a little absent-minded today.)

var UsersRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('users', {
            // Render the UsersView into the outlet found in application.hbs
            into: 'application'
        });
    }
});

We can also specify the name out of outlet to render into using the outlet property:

var UsersRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('users', {
            // Render the UsersView into the outlet named "sidebar"
            outlet: 'sidebar'
        });
    }
});

And of course we can use a combination of both to specify both the outlet's name, as well as where that outlet is found using the into property.