Series: EmberSchool Samples: Introduction to Routing

Nested Routes

Published on Jul 08, 2016

Want to put routes inside other routes? Ember has you covered.

This video shows how to nest routes, how to link to nested routes, how to make sure your nested routes display, and where to put the files for your nested routes.

Code

//in router.js
this.route('foods', function(){
  this.route('food', {path: ':food_id'});
});
//in templates/foods.hbs

{{outlet}}

Transcript

So we have a way to transition from looking at all our foods at once to looking at a specific food. But what if we wanted to show them both on the same page... when we click this, have that particular food show up somewhere on this page? How do we do that? The answer lies in nested routes.

So a nested route is when you have one route inside another. What it’ll look like in practice is that somewhere on the foods page, we’ll put it at the bottom for now, and then whatever is nested within the foods route will show up in the outlet. And we’re going to want to nest the food singular route.

So we can do this in our router. So as the last argument, we put in a function. And so if you put in a path, then it would be the third argument. If you don’t, it’s the second argument. And then we can just put in routes here. And since this path already has foods in it from the nested one, we don’t need to specify that. If we left it in it would be foods/food_id. So we’ll take that out. Now it’s back to food_id.

Now this nesting doesn’t occur just in the router file. It also has to occur in the file structure. So we’ll take our food template and we’ll rename it to go in the foods folder. And we’ll do the same with our food route. We’ll also need to go to our links and change it from food to foods.food. So when you’re linking to a nested route, you have to include the parent route then a dot then the child route. And if there are multiple nestings, you can just keep going. So if there’s a third one under food, you can just keep on putting dots. Let’s see this in action. Alright, that is great. Well, styling-wise it’s not great, but the fact that it works is awesome.

So to review, you can nest your routes and put your child route inside your parent route. And then for ember-cli to recognize your files, you have to go ahead and change where they are on the files structure so that the child route files are put in the folder of the parent route. And this applies to routes, to templates, if there is a food controller it would apply to that.

You also need to have an outlet in the parent route and anything linking to the child route. The way that link-to lists the routes has to be parent route and then the child route afterwards. Then if there was a third route nested underneath the other two, then you would treat food like a parent route but it would still have foods as its parent route, so this would be like a grandchild route. And you would create a new file in here and this would be when we link to it, foods.food.eating. And then food. hbs would also have to have an outlet if we wanted to show what was in eating.hbs.

Now one thing that you may remember through all this is back when we were defining our application template, we had an outlet here. That’s because application is basically a stealth parent to all the routes. Fortunately, we don’t have to list everything under templates/applications/blah blah blah. The folder structure doesn’t apply to the application route, but it does apply to everything else. And that is why application is a great way to include things that you want on every page such as a navbar.

EmberSchool Samples: Introduction to Routing

Subscribe to our mailing list