Defining nested route in router to display specific data

1

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.

nested
nested708×199 17 KB

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.

2

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
3

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?

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
5

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
6

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

7

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