Reflecting State in the UI

[00:00:00]
>> Mike North: Let's propagate this a little bit more and then we can call this step complete. So, I'm gonna go to our teams route and I wanna export this array.
>> Mike North: And that'll let me in the team route.
>> Mike North: And the model hook say,
>> Mike North: Do something with this array.

[00:00:28]
That place holder in the URL, the team ID, we receive that as an argument in this model hook.
>> Mike North: So this string here, that corresponds to in router.js, this string right here, whatever you call this, you're gonna receive an object with key value pairs of any dynamic segments and there are corresponding things that filled those segments from the URL.

[00:00:56]
So if we put a debugger in here, we should see teamId is,
>> Mike North: LinkedIn, it's coming from the URL, right? So now we can do ALL TEAMS, find team.
>> Mike North: And I think if I recall, we'll have to use double equals here, because the URL is always gonna give you a string because it can't decide what's a number and what string, it's just text, whereas our sample data has numbers.

[00:01:39]
>> Mike North: And now we should have a team model.
>> Mike North: So in team.hbs you do team=this.model. And now go into our sidebar,
>> Mike North: And let's just use the team's name.
>> Mike North: All right let's try it out, LinkedIn, Microsoft, Avengers. Kinda looks like we're changing our side bar now, right?

[00:02:10]
That data is changing as we click from team to team, it's all URL driven state, right. We refresh on Avengers, the URL's the same, it's all kinda trickling through and that app is brought into the correct state.
>> Mike North: Let's check our test set real quick.
>> Mike North: All right, let's see, element not found, when trying to log out.

[00:02:39]
I know the problem here. And if we just repeated the steps of this test.
>> Mike North: If we repeated the steps of this test manually, we'd very quickly notice that slash teams, what is on that now?
>> Mike North: It's this, so go to this page and click the log out button, I don't see it there.

[00:03:05]
So we're gonna have to go to a particular team page. We can just hard code it for now.
>> Mike North: And we'll have to assert that we arrived there, or better yet we can assert that current URL starts with slash teams. So that in the future when we're starting to use real data, we don't want this to hang around for long.

[00:03:29]
That's a pretty explicit thing to be in our data, or our test, rather. Let's check the test again. All right, a different one failing now. The team side bar.
>> Mike North: So, what we can do here is delete the usage that doesn't match up with the way we use this component and apply our little sneaky magic.

[00:03:57]
Replace,
>> Mike North: Any white space followed by any new line, followed by any white space.
>> Mike North: And then split by slash n.
>> Mike North: Gotta do deep equal because it's an array, let's see how this turns out.
>> Mike North: Looks pretty reasonable for what the sidebar should contain.
>> Mike North: And we can put that here, and we're good to go.

[00:04:39]
>> Mike North: So, we have added just now, data coming from the routing layer being available in each route's template via this dot model. This is the way an app, a normal ember app will typically work. And next what we're gonna do is replace that hard coded array of teams, with real network calls to an API that's been kind of running behind the scenes, ready for us to use this whole time.