Nested routes in Ember.js

Question

I have an ember app which requires the following views:

---

• One to view all reviews that you've posted - /reviews
• One to view a user's profile - /users/:id
• One to view all reviews that another user has posted - /users/:id/reviews

I am struggling with the third one.

Here is my router.js

this.route('reviews', function() {
  this.route('show', { path: "/:id" });
});

this.route('users', function(){
  this.route('show', {path: '/:id'}, function () {
    this.route("reviews", function(){});
  });
});

My template for this route is in templates/users/show/reviews/index.hbs

And my route is in routes/users/show/reviews/index.js

But when I visit localhost:4200/users/1/reviews , it shows the user profile path ( users/:id - the second bullet point). Like exactly the same

How do I get this route to work with the correct template and route.js file?

Answer 1

Your route should be like:

this.resource('reviews', function() {
  this.route('show', { path: '/:id'})
})

The previous means you will have available the following routes:

/reviews <- default route index for resource reviews

/reviews/:id <- this is the route show

And should have the following files:

Route -> app/routes/reviews/show.js , app/routes/reviews/index.js

Controller -> app/controllers/reviews/show.js , app/controllers/reviews/index.js

Template -> app/templates/reviews/show.hbs , app/templates/reviews/index.hbs

Note that if if you do not define any of previous files ember will generate one by default.

For users should follow the same logic that previous definition.

this.resource('users', function() {
  this.resource('user', { path: '/:id' }, function () {
    this.route("reviews");
   });
});

Translate the previous definition for Users you will have the follow route.

/users <- the default index for resource users

/users/:id <- the default index for resource user

/users/:id/reviews <- the route for reviews inside users

Hope help you!