Ember 2.x Exercise 2 Solution, Part 1

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

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

[00:00:03]
>> Mike North: Okay, so the first thing that I want to do is make sure that I create some new routes. And it's important, usually when you're doing a redirect to try to like take someone from one URL to always redirect to another. It's likely that you want to do that on a leaf level route, not on a parent route.

[00:00:26] And the reason is that a leaf level route is very specific, and you can make sure that you're only redirecting in the case where a very particular specific URL or path is reached. Taking them to another path. So, to get started here, and I'm just gonna look at my instructions here to make sure I'm following my own stuff here.

[00:00:50] I'm gonna need potentially three new routes here. I'm gonna need an index at the root, which already exists but there's no, it only exists in an implied form. There's no file in my project until I need to actually have Ember CLI create a file for me so I may customize it.

[00:01:09] I need an index at this level, right. So it will be org.index. And then this last one will be org.repo.index. Those will be the names of my routes. So going here, I'm gonna go ember g index for my route. Durr, ember g route index [LAUGH]. And then I'm gonna make another one, ember g route org index, using a slash when you're on the command line, a dot to delimit the path when you're in the app itself, and org repo index.

[00:01:59] And so, these are leaf level routes only for the specific URLs where I want to do the redirects will these routes be loaded and thus it's the perfect place to put the code. And so going to the code here. So, basically I want to go to slash, in here it's showing nothing.

[00:02:18] It's a valid route, it is there, but it's showing an empty template with an outlet and there are no child views, and so there's nothing in the outlet, that's just blank. So I'm going to go to this route. Get rid of this for now. Before model, doing it in sixth style.

[00:02:47] I like to call super at the beginning of these because we deal with a couple large apps, and you start refactoring and trying to have a base class that you insert all over the place, and you only have to do that one or two times before you start instinctively putting super in everywhere, even for the NOOPs.

[00:03:11]
>> Mike North: So, I'm going to start with transition two.
>> Mike North: And I'm going to go to orgs, save. Fantastic! We're at orgs. I want to show you guys something. So, I'll start with an empty browser. I'm deliberately cleaning the history stack here for you guys. I'm gonna go to index, right, that's just slash.

[00:03:44] I end up at the right place. Fantastic, but my back button is all screwed up. And you see that it maybe hard to capture on the video. But the URL is actually flickering because what's happening is I've two states in my history stack. I've got this here. This is slash and my current location is orgs.

[00:04:10] And so I've got this page that I keep going back to and it kicks me forward, and I keep going back to it and it kicks me forward, so I'm stuck. I've kind of broken history. So for those who are wondering why we might want to use replace with.

[00:04:25]
>> Mike North: This is the case.
>> Mike North: To convince you that this actually does what I'm claiming it does, fantastic. And now if we look at our history stack, a-ha, Google's on top. Back button works. And in fact the forward button, I will never even go through that initial URL again.

[00:04:46] We've replaced that history state. So the user will not enter it through that redirected route again. Awesome, so we've got that. Now we go to, we wanted to be able to go to jquery. Well while we're here I'm just going to change the template the way we decided we should change it.

[00:05:10] Orgs and now I want to go to instead of org repos, just to org. And so the urls are now just /org, /emberjs. Fantastic, I click on them, I get nothing. Why? Because we're now on org.index. And if we look at the template for org.index.
>> Mike North: org index, it's empty.

[00:05:44] We can put something in it, Wilson.
>> Speaker 2: Isn't that just your base index.
>> Mike North: You're right, thank you. Need better indenting [LAUGH].
>> Mike North: So I can put something here, and I'll see it rendered. So that is in fact the leaf level route that we're on. But, I'm not really interested in fleshing this template out.

[00:06:06] In fact, I want to go to org index and put a similar redirect in here.
>> Mike North: I will explain why I'm transitioning to.
>> Mike North: Does anyone have a question other than the transition to about what I just did here? So, it's odd that this has a dynamic segment, like org, like which org, transition to which org.

[00:06:51] When we were dealing with link two, I had to supply a model whenever I was transitioning to a route with a dynamic segment. Here it's important to understand that you already exist in a certain state, and we're already on a route in the context of a particular org.

[00:07:08] And so by default because the dynamic segments you need to fill in the route I want to send you to are the same as the route I'm currently on, you actually are just basically switching the destination. You don't need to respecify that no, it's in fact the org that I'm on right now, and I wanna stay on that org and go to this child route.

[00:07:32] So now, just to prove that this works, if I just go to org/emberjs, I'll be kicked out to repos. And if I hit the back button, interesting. Yeah, so here we go. Org, jQuery repose back button sends me to my favorite orgs, right? So we can go forward, we can go back, we can go forward, we can go back.

[00:07:55] This is history state looks good. There is a little issue here, I'm gonna dive into it at the end, once we have the full solution here. All right so switching back to the slides we want when you're on the sort of root of a repo I wanna see the list of issues.

[00:08:13] So we're gonna go to repo, index, basically apply the same exact pattern with a different route name.
>> Mike North: So now, when we go into jQuery, now we're on the issues page. So now we kind of can drill through, and we end up at a nice default location, which we can change later, right?

[00:08:40] We can print out a business card, some URL and we have some control over it now cuz incoming traffic we can redirect one place for now but another place for later. There are some good use cases for this. Or if we change our URL structure and people have been bookmarking things, you don't wanna just have links that are out in the world dying.

[00:09:01] So this is a common pattern if you want to change sort of your URL schema to redirect traffic.