This course has been updated! We now recommend you take the Ember Octane Fundamentals course.
Transcript from the "Exercise 1 Solution, Part 2" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Mike North: I wanna just go back to orgs.
>> Mike North: We've got Welcome to Ember there and that's kind of silly, so I'm gonna get rid of that. I'm gonna go to application.hbs, which is the place you put things that are showing up no matter what, it wraps everything. I'm gonna delete that default stuff.
[00:00:27] And then we have an outlet there. So really, when we have a template that looks like this, it's really a pass through. And in fact, when Ember CLI generates a template for you as part of building a new route, this is what it's going to create. The reason is, even if you don't touch this, everything will continue to work as you expect.
[00:00:47] If, for example, some parent route doesn't add anything visual to the screen, but child routes are important. This will allow everything to pass through and work as you would expect. And in fact, if I were to delete this file, Ember will fall back to a default template and continue to function, and this would be the default template.
[00:01:16] So next I want to go to the orgs.
>> Mike North: Template and I'm just gonna say.
>> Mike North: My favorite orgs. And I'm gonna create.
>> Mike North: Some lis and I'm gonna link to.
>> Mike North: Org.repos, and I just wanna make sure that works, so I'll save it. All right, so if I hover over this I can see, and it's very difficult to see, unfortunately Chrome doesn't scale this up.
[00:02:03] But my URL hovering over this I can see is Org/jQuery/Repos. This would be the list of repos for jQuery. So this is in fact what I want. I'm gonna shrink this down a little so we can make it look nice and copy it.
>> Mike North: And we'll just change this to.
[00:02:48]
>> Mike North: So now we've our list of Orgs, and the URL changes as I go through and I can see that my dynamic segment works as expected. So we've got this part done.
>> Mike North: All right, so now I'm gonna go to an individual org. So I'm on the, I actually have two routes active, that I haven't touched the template for.
[00:03:12] I've got org.hbs, and org/repos.hbs, and I can find out that these templates are active through the Ember inspector. If I look at the Active Routes tab, it will actually show you and the view tree will let you hover over and see that these are what are showing up on the screen.
[00:03:28] So, if I go that org.hbs, and I'm just going to put Facebook here or something, and I'm gonna to orgrepos.hbs. Orgrepos.hps, and here another list.
>> Mike North: I'm gonna do link, so link-to react org.repo.issues and then react.
>> Mike North: All right, so you guys may have structured your routes differently, and I just wanna paint it, I wanna illustrate the difference between what you're seeing on the screen here.
[00:04:24] So here the list of orgs and an individual org, they don't really share anything in common in terms of the template. If I had just, had like orgs index for the list and then orgs something else. They would share this common orgs.hbs template. You'd actually be pivoting at a lower node in the route hierarchy.
[00:04:53] And when you're pivoting on a lower node, that will typically correspond to common elements being shown on the screen. Right, so I'll just hover over the view tree here, so we can see what that means.
>> Mike North: If you don't mind I'm just gonna hopefully, oops. We're hopefully gonna speed things up by not mirroring anymore.
[00:05:30]
>> Mike North: All right, that's much better. [LAUGH] So if we look at routes here, and I make this wider, and you look at the current route only, we can see that we've got application and we've got orgs. And if you look at the views, that is exactly what you'd expect.
[00:05:46] Remember we cleared everything out of application, and so you're seeing that basically orgs is the entirely of application. It's filling that outlet, and there's nothing else to application.hps. If we go into an individual repo here, we've got org, right, instead of orgs and that's the templates here. And then, within that, we've got org.repos, and that's going to be basically this section here.
[00:06:22] So, one of the requirements on the screen was that any time you're, one of the requirements listed for this exercise was, any time you're viewing a particular org, I want a link that says, back to the list of orgs. And so I'm just gonna add that here.
>> Mike North: And it will pop-up here and so we can go back and forth and back and forth.
[00:06:48] And of course we've hard coded everything, and so you don't really see things changing in terms of what's rendered but the URL is accurate, right? And that's the point of this exercise. So, let's continue our work here. Just copy this into the li and we'll do react-native, and we'll do watchman.
[00:07:19] And now we've got a list of repositories. And when we drill into one of these, you'll see that because we're still in the context of org. This part of the template remains on the screen, and so if I go to repo.hbs and I do something like this, let's take it down one layer, one point.
[00:07:55]
>> Mike North: So that's the repo, and then we need the ability to toggle between Issues.
>> Mike North: And Contributors.
>> Mike North: And just to make it look nice.
>> Mike North: We'll add a little bit of style afterwards. But one thing I wanna point out about the link-to, if we look at the HTML that's generated, you can see that active is a class that's added to issues.
[00:08:57] And if I switch to contributors here, active will be added to contributors. So this is another thing that sort of comes for free. Link-to out of the box gives you an easy way to style active state of a link, because that's a common need, right, if you're building a nav or something.
[00:09:19] So we can actually.
>> Mike North: We'll just go here, we'll do class = repo-nav, and here we'll just do some quick stuff.
>> Mike North: And.
>> Mike North: And then by default.
>> Mike North: All right, so now we've got some semblance of a nav.
>> Mike North: Where we can clearly see some active state here.
[00:10:14] And last thing I'm gonna do is go to Contributors, and just put something here.
>> Mike North: And Issues, and put something here.
>> Mike North: And so here's what we're left with. So we can toggle between Issues and Contributors, and see that only the template sort of below the nav that we built is changing.
[00:10:46] Everything else is left untouched in the dom. So if we go back to the list of orgs, we go to Ember, we go to an individual org, and now as we drill into repo, this up here will remain untouched. It's only what's in the outlet of the thing that we're pivoting on that will change, right?
[00:11:10] And then as we switch here you can see that only what's below it in that outlet, that we're pivoting on will change. Does that make sense to everybody?
>> Speaker 2: And then the URL isn't changing either.
>> Mike North: The URL is actually changing. If you look, let me make it a little wider.
[00:11:27] So we're going Issues, Contributors.
>> [INAUDIBLE]
>> Mike North: So orgs, we'll go to Ember, so we're at org/emberjs/repos, then we'll click on repo. Actually, we've run into the problem.
>> [INAUDIBLE]
>> Mike North: I set myself up for a bug and then I forgot about it. So, here's the issue. When you're building these link-tos, for example, when we're building a link-to to go into a repo, the complete URL has two dynamic segments in it.
[00:12:04] It has the name of the org and the name of the repo. And because in my router I've used id twice, think of it as like a context that is used to populate the URL. So I have an ID already there and I use it again, and it's basically, it's the same value.
[00:12:26] So if I just change this to like repoid, and I go here and then react-native. Now you can see that we have the URL that we're supposed to have. Good catch and thank you for not letting me forget the trap that I set for myself. So, I just want to check back at what we set out to do here.
[00:12:52] So, we've got-
>> Speaker 2: What is the scope for the id?
>> Mike North: The scope? I'm not sure what you mean.
>> Speaker 2: Just in the hierarchy of the directory structure.
>> Mike North: So.
>> Speaker 2: [INAUDIBLE]
>> Mike North: The dynamic segment I would not try to connect that to the directory structure. It is simply a place holder for a dynamic value of some sort, anything other than a forward slash, that pertains only to URL.
[00:13:28] And part of what a router does, is it decouples your code from the URL to some degree. So the way your routes are structured, the hierarchy of the routes, matters a lot more in terms of how your code is organized than to the actual URL itself. And this is a powerful place where you can have control over that relationship.