CODEWITHSUNDEEP
javascripturlember.jsurl-routing
Marco Prins
Marco Prins

Reputation: 7419

Nested routes in Ember.js

I have an ember app which requires the following views:

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?

Upvotes: 0

Views: 204

Answers (1)

DeivinsonTejeda
DeivinsonTejeda

Reputation: 404

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!

Upvotes: 1

Related Questions