How to render into parent resource's index {{outlet}}

Question

I have 2 nested resources, Post and Comment in an Ember router. I want this to reflect the url:

/posts/1/comments/1

Going to this page should,

Render the Post for id = 1 using post/index template.
Render the Comment for the Post with Comment id = 1 using the comment/index template

Here is the example on jsbin.

My routing code is,

App.Router.map(function() {
  this.resource('home', { path: '/' });
  this.resource('posts', { path: '/posts' }, function() {
    this.resource('post', { path: ':post_id' }, function() {
      this.resource('comments', { path: 'comments' }, function() {
        this.resource('comment', { path: ':comment_id' }, function() {
          // need explicit index
        });
      });
    });
  });
});

The templates and the rest of the Ember code is pretty much stock. Only thing different is I am redirecting to /posts/1/comments/1 from the home route.

I can't get the post or the comment to render inside the /index template. Both the Post body and Comment Body are blank.

It works if I embed the contents of the index template inside the main posts or comments template. But this isn't what I need, the comment needs to be nested inside the Post.

Any ideas how to get this working? Thanks.

PS: I am using ember-latest and ember-data latest.

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-06-23T16:07:38

Usually this sort of problem comes down to naming conventions. Probably ember is looking for controllers and templates that you do not expect. Try adding the following to your application then watch console, it will help you see what routes/controllers/templates are being used.

App = Ember.Application.create({
  LOG_ACTIVE_GENERATION: true,
  LOG_TRANSITIONS: true,
  LOG_VIEW_LOOKUPS: true
});

Also, those routes are probably more complicated than they need to be. Typically it does not make sense for 'post' route to be nested within a 'posts' resource. Same goes for comment/comments. Try this instead:

App.Router.map(function() {
  this.route('posts');
  this.resource('post', { path: '/posts/:post_id' }, function() {
    this.route('comments')
    this.resource('comment', { path: '/comments/:comment_id' });
  });
});

How to render into parent resource's index {{outlet}}

1 Answers