URL Driven Models

[00:00:00]
>> Mike North: Let's try to drive some data from our templates. Sorry, drive some data from our routes into our templates and then we can call this step complete. There is a lot of data in this project and it's in the db.json file, it's a top level file of the project.

[00:00:21]
Who prints anything anymore?
>> Mike North: Okay, so you can see this is a very, a nice flat organization of JSON where we've got messages, channels, users and teams. What I want you to do is just grab a couple of these teams. I don't really care how many. Copy them to your clipboard and then go to your team's route.

[00:00:46]
And we're just gonna toss these into an array. All teams,
>> Mike North: There we go. So we've got three of them in there, and we can close it up, cuz I don't really care what's in there at the moment. Now the time has come for us to use our model hook.

[00:01:06]
And this is how we could typically go and fetch some data like use either ajax or fetch or something else. And retrieve that data and then make it available in this route's template. Anything your model hook returns will be available in your template for easy use. Just call this.model in the template and you'll get whatever this returns.

[00:01:35]
And if this returns a promise, you'll get whatever that promise resolves to. So it's another a sync function.
>> Mike North: And for now we're just gonna return all teams. And we can save. Let's go and consume this data, teams.hbs. So the team selector, that's what contains all of these little buttons to switch from one team to another.

[00:02:06]
We're gonna have to pass this data into the team selector. We know how to do this, args, right? So we'll just say, oops, teams = this.model.
>> Mike North: By the way, if we wanted to debug this just to make sure everything's copacetic at this point, you could also do log, this.model.

[00:02:30]
And it effectively is a console log. There it is down here. Right, there's that the array that we're returning this console log, and then there's also a debugger here, just like in JavaScript. And here we would do, following these instructions we could do like context. Hey, there's model, and there's our array.

[00:02:53]
So we can stop at this break point. And if things are not looking right and you're tracking things down, this is a nice way to sorta search for the problem and bisect problem areas and figure out whether things have made it into templates or not. Everything looks good based on those two little probes.

[00:03:12]
So let's turn our attention to the team selector. Using my handy dandy fiesco extension, I can just click on this and it will take me to TeamSelector.hbs. And what I wanna do is, these two look like the two buttons here, and this, the add-team-button, that's probably this little plus sign.

[00:03:36]
We'll leave that alone and I wanna remove the hard-coded teams. And I wanna replace them with something that's based on the data that's been passed to this template. So I'll get rid of the Microsoft one cuz we only need one in order to build a loop around it.

[00:03:52]
And this is where we're going to encounter the each helper. So this is like a for loop in your handle bars. So we can say, each teams as team. And the way I think about this, it's almost like array.forEach. Where this is a callback that is passed to your forEach function, right?

[00:04:17]
You pass a function to forEach, that's given an argument and it's invoked for every item in the collection. The reason I think about that is,
>> Mike North: That team, is only valid in this scope. I think of it as a call back because there is in fact a closure that is at work here, right?

[00:04:40]
So this is the third type of reference to a variable that you will find in templates. The first at that means it's an arg something that's passed in. The second was this dot something. That's how we know it lives on the component, right? And then there's third one where we just have team, that we know is happening because you're inside something that's provided a limited and local scope, where that is a valid thing to use.

[00:05:14]
But there are three different ways, three different things and now they finally have three different syntaxes. So we can disambiguate between them. So let's see what a team looks like, thankfully, I actually lost it. We can get it back, though. Log teams, I wanna see what a team looks like.

[00:05:36]
So it has an ID, an icon URL, a name, and an order. I'm not gonna read too much about order here. ID seems important, this looks like a team ID. I should probably put the ID there. Something like that, the link we've gotta obviously replace that for reasons we talked about previously.

[00:06:03]
So we're gonna link to the teams.team. So it's like the teams.hbs for LinkedIn in and we're gonna say the model is the team ID.
>> Mike North: Model is what's used to fill in the blank in that URL. So if we go back to a router, we have this team ID here.

[00:06:32]
So when you say I'm providing you a model, it's the ID of the team. You're filling in that team ID blank. Without that, this URL cannot be built.
>> Mike North: Finally, we've got an image here. And we can replace that with team, icon URL and alt text,
>> Mike North: Team name.

[00:07:01]
Nothing else here looks team specific, just a bunch of styling, let’s give it a try. Hey, there we go so we see a new team pop up that was definitely not in the hard coded HTML that we were given. So we’re looping over this array. For each item in the array, we’re creating a little bit of template.

[00:07:22]
We’re using link 2 and passing it the route we wish to send the user to, we're passing in a model so that we can fill in the blank. Here's your team ID. And clicking on each of these, we won't necessarily see changes in the UI, but in the URL at least the Li should change to Ms and the Avengers and back.

[00:07:46]
>> Mike North: We're not done yet. I mean, obviously there are improvements we need to make in next steps, but the links are operating properly. And we have successfully passed some data down from the routes to the templates.
>> Speaker 2: What's the syntax for routes with multiple models in them?
>> Mike North: Models.

[00:08:09]
>> [INAUDIBLE]
>> Mike North: Something like that,
>> Mike North: Make sense?
>> Speaker 3: So if you did models, would you give it an array, or?
>> Mike North: Yeah, this might even work. And it does,
>> Mike North: Team.ID, hm, interesting. Sorry, let me just check our sample data. Cuz I see it used to be LI, but now it's LlnkedIn.

[00:08:41]
>> [INAUDIBLE]
>> Mike North: Good, so that checks out. There you go, array helper and then the ordered elements of the array.