Possible to use application outlet when using nested routes?

Question

I have an app based on Posts. When I nest the routes like this:

this.resource('posts', function() {
  this.route('post', {path: ':post_id'});  
});

and try to access the /posts/id link it would only render the template if I place an {{outlet}} into the posts template.

Here is the code I am working based on github. It has all the functionality except it renders into the parent outlets and not the application outlet.

Would it be possible to have the show, new or edit template render its template in the application {{outlet}}?

score 2 · Answer 1 · answered May 21 '13 at 06:47

2

You can override the renderTemplate(controller, model) hook for your route and call this.render:

renderTemplate: function(controller, model) {
  this.render('post',    
  {
    into: 'appplication',                // the template to render into
  });
}

Other options you can pass are outlet (to select a named outlet), and controller (to use a controller of your choice).

See the routing guide for more details.

answered May 21 '13 at 06:47

Sherwin Yu

3,180
2
25
41

Thanks Sherwin. I added that override into the PostRoute, but unfortunately that did not work for me. Any other suggestions? – Pan Wangperawong May 21 '13 at 08:15
Could you provide a jsbin / jsfiddle code sample showing the problem? – Sherwin Yu May 21 '13 at 09:48
Here is a link to the [github](https://github.com/mankind/ember-app.git) code I am working off of. It has nested routes and I can't get it to do the override **into**. – Pan Wangperawong May 21 '13 at 17:50
I took a look at your code -- could you link to where you're trying to override the ```renderTemplate``` hook as I suggested? I couldn't find the route. – Sherwin Yu May 21 '13 at 21:03

score 0 · Answer 2 · edited May 23 '17 at 10:26

In general, if you are using nested routes then you must have nested outlets. Otherwise, transition back to the parent route using the browser back button will output an empty template. Hope you are aware of it.

You can find more details in the below links

score 0 · Answer 3 · answered Jun 07 '14 at 09:16

I know this answer is a little late but I was just having the same issue. The problem is that nested routes rely on having nested outlets. If you want the route to render into the application outlet you can do something like this:

this.resource('posts');
this.route('post', { path: '/posts/:post_id' });

This way the URL is still nested but everything gets hooked up correctly. You could also go a step further and define a different template name by adding a suffix to the route. Eg.

this.resource('posts.show', { path: '/posts/:post_id' });

Possible to use application outlet when using nested routes?

3 Answers3