Defining nested route in router to display specific data

4

So as @acorncom said your router.js should probably look like this instead of what you have:

Router.map(function() {
  this.route('finder');
  this.route('login');
  this.route('register');
  this.route('restaurants', function() {
    this.route('show', { 'path': '/restaurant:id' });
    this.route('list');
  });
});

This will generate routes with paths:

restaurants/
restaurants/1234
restaurants/list

vs what you had originally which would generate:

restaurants/
restaurants/restaurants/1234
restaurants/list

If you really want the double restaurants then by all means… Just seemed like something you may not have intended.

Anyway in templates/restaurants.hbs make sure you have an {{outlet}} that the child route can render into, and then define a link-to like {{link-to 'restaurants.show' 12}} where 12 is the id of the restaurant you want to pass. In the example above you weren’t passing an ID to your child route via the link-to which might have been an issue. If you have it in an each block it should look something like this:

{{#each model.restaurants as |restaurant|}}
  {{#link-to "restaurants.show" restaurant.id}}
    {{restaurant.name}}
  {{/link-to}}
{{/each}}

So to summarize the two things I would make sure you have are:

  1. an outlet in your parent template
  2. you’re passing the id of a restaurant in your link-to “restaurants.show”
1 Like