Series: Building the CRUD-builder

Nested Routes and Outlets

Published on Apr 25, 2015

Routes and the associated URLs are the core of your Ember app's structure. This screencasts looks at how to nest routes, using outlets in the outer nestings to view the templates of the inner nestings.

UPDATE: Ember 2.0+ no longer has 'resource'. Instead, it just uses 'route'. If you want namespace resetting for a route, pass '{resetNamespace: true}' in the options.

I've covered the new way in the 2016 CRUD series



Routes and their associated URLs form the core of your Ember app’s structure. Today, we're going to look at combining routes through nesting them, and using outlets to do that.

Master-Detail Nesting

Let's take a fairly common scenario where we have a series of resources. In this case, the "posts" resource and then the singular "post" resource inside of it. They're going to be in a master-detail view. On the outside, we have the application. In the application template, there's an outlet. That gets filled in with the "posts" route, once we go there.

We're in the "posts" route and in the "post" template, there's another outlet. That's going to get filled in by the route that we go to in the URL after "posts." It could be filled in by the index or new, or in this case, it's going to be filled in by the "post" route. Let's take a look at how that plays out in a real application.

This is that same master-detail view in an application. Here in our Ember Inspector, we can see in the "routes" tab these three routes. The application- it happens right at the top, there’s no URL for that. Then you have the “posts", and then "index" is automatically displayed into the outlet if there's nothing else. You'll see that when we click this, "index" will change to singular “post”… And, uh… that is a bug in Ember Inspector that we just found.

Let's go ahead and look at the view tree and we can see that the views are nested just as we predicted. The URL is showing the post_id. The post_id being the part of the URL that corresponds to the “post” route.

Let's look at what this looks like in the code. Here's the routes, just like we showed on the slide before. Then, we have the application template which in this case is just a div with an outlet. That's why you didn't see anything from the application template when we were looking at it. In the post template, we have the column on the left which is a list of all the posts and a link. Then on the right, we have the outlet. The index is just announcing that it's the index and the post is just showing the title.

Now that you've seen the outlets, you can see you have the application wrapped around here… let’s go ahead and see the entire application is here. And then "posts" is a smaller bit. The "post" wraps around both the list on the side and all of its outlet. Then the outlet only takes up the part on the right.

Those are the basics. Let's reinforce that knowledge with a quick example of a slightly more complicated situation.

A slightly more advanced example

Here are the routes that we have for tags. It's similar to the nested routes that we have for "posts," but we've added a new route, a show route, and an edit route. Let's look at this in the browser. This is our index. I didn't bother putting anything special in the index. You'll see if we click on one of these, it will display the tag route and then the show route on the side of it in here. Currently, the tag template is just an outlet. That's what gets auto-generated so it passes down to the show and to the edit. We can also go to the new route which is nested directly under tags. As you can see, adding these complications didn't complicate the concept. It's just the same concept applied in a few more places. That's it for nested routes and outlets.

Coming Soon

You may have noticed during this episode, the file paths here look, they look a little bit different than you may be used to. That's because we're using the Pods Directory Structure. In this week's Pro Episode, I'll be going over the details of the Pods Directory Structure and how you can start using it in your app right now. You also may have noticed that this looks a lot like a CRUD interface. Next week, we'll be going over the details of how to build a CRUD interface with Ember and Ember data. I hope you'll check those out and see you soon.

Building the CRUD-builder

Subscribe to our mailing list