Ember 2.x Exercise 1 Solution, Part 1

Transcript from the "Exercise 1 Solution, Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Mike North: I'm gonna walk through the solution now, or my particular solution to this.
>> Mike North: So let me pivot over to the code.
>> Mike North: And I've lost my workspaces again. There it is.
>> Mike North: Come on.
>> Mike North: Whatever.
>> Mike North: Okay so, I'm gonna start by using Ember CLI to generate a bunch of routes here.

[00:00:46]
>> Mike North: And the way I'm gonna approach the code for this, I just send out a link to a repo and get help in the Frontend Masters org. And as I go through the examples I'm gonna actually commit the code so that the video and the repo line up, and then we can just freeze that and refer back to it if we need to.

[00:01:09] So the first thing that I wanna do is build the orgs route, ember g route orgs.
>> Mike North: This is for my list of orgs. And I'm actually gonna generate a route called org for an individual org. And we'll see why, it has to do with something visual on the screen in terms of how I want my hierarchy of templates to be structured.

[00:01:36] This will give me a useful place for something that one might commonly need.
>> Mike North: And I'm going to create org/repos for the list of repos. And because I'm gonna go through the complete example, I'm gonna create a route for the individual repo as well.
>> Mike North: And, this is a good place to start.

[00:02:09] So, if we go back to the code, and look at our router.js, we've got something that looks like this. And I'm gonna get rid of my sidebar here. So the first thing I wanna do is add a dynamic segment to my org route. So this, this here is gonna be orgs, and this I want to be,

[00:02:35]
>> Mike North: Something like that. Well, really it's gonna be org, something like that. And in order for that to work we need a dynamic segment, so we'll go, {path: 'org/: id'}.
>> Mike North: And for repo, this we're gonna want like, org/jquery/jquery-ui. If we look back at the list of URLs that I wanna be able to handle, I just want, just to match GitHub, I want the org name and then the repo name right after it.

[00:03:12] We don't need slash repos, cuz repos are really the main thing that an org has.
>> Mike North: So the way I'll do that, I'm already in the context of org with a dynamic segment after it for the org name. So, I simply need to just have id here. Now for a reason that will become clear, actually, I'm gonna make a mistake here.

[00:03:40] I'm gonna deliberately make a mistake, and then we can see why we need to alter this dynamic segment. But, we know we need something there. We need some way to abstract the name of the repo if we're looking at an individual repos page. And just for completeness, I'm gonna do repo/contributors,

[00:04:06]
>> Mike North: And then issues.
>> Mike North: And so all in all, this is what we end up with.
>> Mike North: And if we look at the Ember Inspector, and look at our Routes tab,
>> Mike North: Get rid of this junk. It may be a little difficult to see but,
>> Mike North: So I just want to point out that things are showing up.

[00:04:41] So here's orgs, here is org, and then children of org, we've got org.repos. We've got a lot of things here that say loading and error. We will go into that, those are what are called sub-states.
>> Mike North: Here's my individual repo, so everything's kind of showing up. And if, unfortunately, this is not expandable here, but,

[00:05:09]
>> Mike North: Take my word for it, it's all there. And we can verify it by just testing with the URL. If we go to our console here.
>> Mike North: So if we go to a random URL, like abc, we'll actually throw an error, unrecognized URL error. So anything that doesn't throw this error, it stands to reason, is handled in some way by the router and by matching it to one of our defined states.

[00:05:43] So if we go back, if you just go to orgs,
>> Mike North: And I wanna only look up the current route, so that works, that's what I expect. And I'm just gonna test one deep example.
>> Mike North: This is a nonsense example but, [LAUGH]. And if we look at current route only, we can see we have a pretty deep hierarchy here, but this is the route for an individual organization.

[00:06:09] This is the route for a repo within that organization. And this is a route for the list of issues, within that repo, within that organization. And so if we think about eventually we're gonna have some data being fetched at each of these different levels, and you can see that the hierarchy of the views matches the hierarchy of the data.

[00:06:32] And also, there may be places where we want to display information about each of these objects on the screen. And the way I structured the example here, this will lend itself well visually to what we're trying to do.