Replace parent view from child route

Question

Following my question here Nested routes in Ember I would like to replace the view rendered from /settings/users/ with the view rendered by /settings/users/1.

My routes are defined as:

Router.map(function() {
    this.route('login');
    this.resource('settings', { path: 'settings/:settings_id' }, function() {
        this.route('overview');
        this.route('users', function() {
            this.route('user', { path: ':user_id' });
        });
    });
});

My user.hbs template will render when users.hbs contains {{outlet}}. I want the user.hbs to render in place of users.hbs not within it.

Answer 1

Change your users template to just an outlet

{{outlet}}

And put the stuff from your users template into your users/index template, then it will only show up when you're on the users route, and when you go any deeper, it won't show the index route.

Cool stuff in the users index template

Example: http://emberjs.jsbin.com/jacebeyira/1/edit?html,js,output