This course has been updated! We now recommend you take the Ember Octane Fundamentals course.

Check out a free preview of the full Ember 2.x course:
The "Exercise 2" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise you will take the hard-coded data out of the templates and place it into the routes. This way the routes will be providing the data and redirecting.

Get Unlimited Access Now

Transcript from the "Exercise 2" Lesson

>> [MUSIC]

>> Mike: So, what we're gonna do is we're gonna take some of the hard coded data that's currently in our templates, that's currently in our HBS files. And it's still gonna be hard coded, but I wanna move it out of the templates into the routes. So we're gonna end up using the model hook and returning something for it from it, so that we can then make our template a little bit more generic, based on whatever the route's returning.

[00:00:31] And then an exercise after that will be no longer hard coding this data, let's get it from an API. But that's sort of where we're going. So this is gonna come in two pieces here. The first is I have some URLs that I would like to pass around, I'm acting as the product owner here.

[00:00:53] I have some URLs in this app that I think are reasonable URLs to expect people to type in. But currently, they don't really work with what we have, right? So if I just go to org/emberjs, I wanna redirect to org/emberjs/repos. So I can distribute this link, and if at some point in the future, we want the default page for this org to be something different, that's fine.

[00:01:22] And I wanna do the same thing for the repo. By default, if you just go directly to orgname/reponame, I wanna end up on the list of issues. And this will mean that the URL actually changes, because we're gonna do a redirect. The second part of the exercise is taking this hard coded data out of the templates and using the model hook instead.

[00:01:49] So, here is an example array if you wanna use this, but I actually want a return object here, an array of objects, the ids of which are gonna be the names of, these are valid GitHub org names. And I want us to change our template, so that instead of explicitly writing out each lI, I wanna use this each handlebars helper that we learned about earlier.

[00:02:19] And I will put the slide up, so that we can refresh our memory as to what that looks like. But so we're gonna have an unordered list, and then inside that, an each, and then in the body of the each, an li. So essentially, we're getting some more complex control flow here.

[00:02:36] We're getting a for loop.
>> Mike: And I also want us to update our links to use these new routes that will redirect. Right, so the list of orgs right now, as things stand, they will take me to explicitly the repo list. So, let me go back to the app here just to describe what I'm talking about.

>> Mike: So if we look at this list of orgs, when I'm iterating over the list, I'm explicitly saying, take me to the repo list of each org. I want these URLs to change. I want it so that when I copy this link address and paste it up here.

[00:03:41] Oops, is my clipboard working?
>> Mike: Something is strange on the keyboard here.
>> Mike: Well, maybe you guys can, looks like I have a little technical difficulty here, but essentially, I want the list of orgs. Like here, this should just take me to org/jQuery. That should be the URL here.

[00:04:19] But when I click it, I wanna actually go through these redirects that we're building up in exercise 2a.
>> Mike: So that makes sense to everyone? I'll sort out whatever is going on with my keyboard here in a moment. And then finally, here's a little refresher on how each works.

[00:04:42] You're gonna end up doing something very similar to this, except you'll probably be iterating over content, instead of myList cuz remember content is whatever the model hook in the route returns. Does anyone have any questions about this?
>> Mike: And just a reminder, we're gonna need to create two brand new routes here, cuz currently, they don't exist.

[00:05:13] The routes I'm asking for in part a of this exercise, they're not even in the project yet. So you'll need to create them first. And then potentially use the before model hook to send us off to where we wanna go.
>> Speaker 2: What does the pipe indicate in the for each?

>> Mike: I'm gonna punt on that, but treat it as sort of a local variable that is only available in your each loop, representing the object that you're currently on in the iteration process. So if you have an array of like a, b, c, that will be the variable, that thing in the pipes will be a, and then the second time around b, and then the third time around c.

>> Speaker 2: Do we start from exercise 2 for that branch?
>> Mike: So exercise 2 contains the solution for this. So I would start from what you have or reset hard to exercise 1.
>> Speaker 2: Or should I send him that new one that you pushed?
>> Mike: Yeah, you could start from there too, and then we'll be all on the same page.

>> Speaker 2: I'll paste that one in there.
>> Speaker 2: And then one more question, does it make sense to just use setup controller to set up all your state, like this .controller.set and not use the model class?
>> Mike: I mean, you could put something together that would work, but remember, set up controller is not promise aware.

[00:06:48] And what you're doing there is you're deviating from the conventions for no good reason, right? So the route, the base class ember.route is already setting this property content on the controller for you. So I don't know exactly why you would want to do that. The only case would be potentially,

>> Mike: If you returned an RSVP hash from model, and then instead of controller, you needed to kind of like move things around. Say that you were trying to modify something, and you didn't wanna change the templates too much. You could kind of like rename things and separate things a little bit.

[00:07:38] But remember, the async work should be done in an async aware part of the route lifecycle.