CODEWITHSUNDEEP
ember.jsember-rails
Pan Wangperawong
Pan Wangperawong

Reputation: 1250

Possible to use application outlet when using nested routes?

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}}?

Upvotes: 3

Views: 552

Answers (3)

cdaloisio
cdaloisio

Reputation: 1516

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' });

Upvotes: 0

phkavitha
phkavitha

Reputation: 847

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

  1. Nested routes rendering into same template/outlet breaks on browser back button click
  2. https://github.com/emberjs/ember.js/issues/1947#issuecomment-12975454

Upvotes: 0

Sherwin Yu
Sherwin Yu

Reputation: 3230

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.

Upvotes: 2

Related Questions