Defining nested route in router to display specific data

Hy e… I had a problem in defining the nested route. I want to show the details of one restaurant when user click on the restaurant.

this is my codes. my nested template that i create also just show a blank page. But the path is correct. Somebody can help me on the right way to used the nested route.

Your issue is likely to do with the second restaurant segment defined for your show route. Specifically, the url that that expects is restaurants/restaurants/:id instead of what I presume you are after (restaurants/:id). If you simplify the path for show to :restaurant_id it will likely work.

If that doesn’t work, it you generate a link using the link-to helper to restaurant/show and then follow it do you end up in the show route model hook?

1 Like

at first i wrote the path like you said- :restaurant_idbut it doesn’t work…i just try and error. Now my project doesn’t retrieve the data from the restaurant model if i put the path to the show router.

this is my codes to link to the show.hbs

{{#link-to "restaurants.show"}}

{{restaurant.name}}

{{/link-to}}
{{restaurant.hours}}

If that doesn’t work, it you generate a link using the link-to helper to restaurant/show and then follow it do you end up in the show route model hook? i am sorry i quiet don’t understand what did u mean by do you end up in the show route model hook?

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

I don’t believe the routes – as proposed – will work because they are mixing static and dynamic route segments.

Looking again at the example:

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

The restaurants.list route will have a path of /restaurants/list. But the router would be unable to determine whether “list” is the :id dynamic segment for the route restaurants.show or just a static part of the path.

I think what you’re actually looking for is to use the autogenerated restaurants.index in place of restaurants.list:

this.route('restaurants', function() {
  this.route('show', { 'path': '/:id' });
});
1 Like

Thanks a lot. your reply really help me out of my problem now . now i just knew how to link to specific id . Thanks again really helpful answer . I need to go more deeper on this part to understand more since i am really new to ember . More things need to figure up

yeah actually when i am creating the nested route i am also didn’t get the idea whether to create a nested route or not for the restaurant page. I am really confuse and not clear on what i want that time.My purpose is to display a specific id for a restaurant when user click on the restaurant name it will show the details of the restaurant. And its solved now. Thanks a lot for the response. really appreciate it