Series: EmberSchool Samples: Introduction to Routing

Navbar and Outlets

Published on Jun 29, 2016

Once you get enough routes, it becomes tedious to link to them from everywhere. One way to solve this problem is by creating a navbar that is shared through the entire app..

Code

{{!- application.hbs }}

{{link-to "About" 'about'}}
{{link-to "Foods" 'foods'}}
{{link-to "Contact" 'contact'}}
<hr>

{{outlet}}

Transcript

So currently in our app we have two routes, and in each of those we have a link to the other. Now let’s say we wanted to add a third route, a route where they could contact us if they wanted to. So to make that, we will make a template, contact.hbs, and a very helpful message, but then we need a way to link to that from the about page and from the foods page, and then in the contact page we’ll need links back out to the about page and to the foods page.

So alright, we’ve got all of that working, but at what cost? There is only three pages and the linking between them is already becoming a pain. I left all that link stuff on at regular speed instead of speeding it up just so you could see that how long it’s taking just with three of them.

One possible solution to this problem is to simply not link to every page from every other page. And as a matter of fact, we will be doing that, but only after we have good categorizations of the different types of pages, and we’ll still want to link to each category from each other page. The answer that we’ll pursue in this video is to have a navbar up top, so a place up top before the main content of the page where you can see all the links.

So a super naïve version of this would be just to create this thing that we can copy and paste and put at the top of every page, but this will once again get tedious, although not as tedious as the old version. So it would look something like this. What if we could put this automatically at the top of every page? Well, there’s good news because you can do that. Remember our application route? Well, application is actually a little bit special because it is automatically put at the top of every page. So before we had one, it was just this. And an outlet means that it shows whatever is in the page below. And so we put stuff before the outlet, and viola, now we have a navbar.

So our first reaction to this can be to remove all those links that we were using before, because now those links are up in the navbar. The second is to investigate a little bit more what’s happening here. So let’s take our outlet. So right now we have this. What happens if the outlet disappears? Well, then we’re left with just our navbar. So the outlet is vital for showing everything else. And what happens if we go to the application route? Well, once again it’s just the navbar. But now it’s not because of a missing outlet. It’s because that’s just where we are.

So we’ll go over how this works in more detail later in this section, but it’s like we have the slash here, the content for the slash, and then in the outlet we have the content for the about. The end result is pretty cool, right?

EmberSchool Samples: Introduction to Routing

Subscribe to our mailing list