Routing Dynamic Segments

[00:00:00]
>> Mike North: We're gonna use Ember CLI in order to create some new routes. And I'm gonna try to automate this as much as possible. We're trying to lean on Embers opinions and conventions. So that we can,
>> Mike North: Do as little work as we have to. So the first thing I wanna run is ember g route, and I'm gonna open up router.js, just so we can see what's already in there.

[00:00:29]
Teams, so I want teams/LinkedIn. That's how I want my URL to look like. And internally when I'm creating link two, or I'm calling transition two. I want the name of that route to be teams.team. I could also do teams.show. That something that indicates this is a single team, that's what this page is all about.

[00:00:56]
So ember g route teams/ team, something like that, and we can pass an argument called path and this is gonna be the path within teams. So I'm just going to say :teamId and I'm going to put a colon before it. The colon indicates that this is what we call a dynamic segment.

[00:01:24]
It's a part of the URL that it's gonna have like an ID in it or something right from our diagram earlier. This would be like the LinkedIn or the Microsoft that string, which we will need to use to make an API call. So we're gonna get the route module, we'll get the unit tests for the route.

[00:01:43]
And we can see that this nesting has already been applied automatically. This route has been installed in the router. We can go one level deeper, and we can say I want teams/team/channel. Right one more level of nesting because remember, it's almost like has many relationships. If you've ever work with a database before and an object oriented database design that has many relationships those also kind of go down these nesting levels.

[00:02:22]
Our application has many teams, a team has many channels, right? Each of those also happens to have turned into a layer of nesting. Often ends up that way. So we're gonna say channel ID.
>> Mike North: Great and it's kinda oddly formatted. Let me unroll it a little,
>> Mike North: Just so we can talk about it a little more effectively.

[00:03:00]
All right, so, teams is gonna be like this. Teams, and then anything after that. And this is gonna be, go down here, teams/(linkedin), and anything after that. Sorry, that would be this one. And then this would be something like that. So that is how the URL nesting is applied here.

[00:03:33]
These are all in the context of their parent and grandparent, etc. But these are kind of URL's that we are going to see. So let's start, because we have the HBS files for each of these routes let's start to break up our team's HBS which has a whole chat UI in it, currently.

[00:04:00]
So I'm gonna leave the team selector in there, right? Regardless of which team you're on the selector to pick your team that should remain there and switching between teams. That's not gonna take down that sidebar. So it's totally appropriate the team selector should be in this. Will make sure to put our outlet here because that's where all the rest of this content is gonna come through by way of the child templates and grab everything else and we're done.

[00:04:31]
So let's go to team hbs. So here we're gonna wanna leave just the team sidebar. If you change channels, which is what this team sidebars all about it's the channel list and then the logout button. As you change channels we don't need to tear that thing down and rerender it.

[00:04:55]
It's not getting swapped out for anything. It's the other content. It's the content to the right of the sidebar, right, this outlet. That's what's getting swapped out as we go from channel to channel to channel. So this is the appropriate template for team.hbs. And then finally, channel hbs this is the lowest level and we just have the rest here.

[00:05:20]
So, let's see what this looks like as we play with it. Teams, okay. So we've landed on teams and we can see that the sidebar is rendered, we don't have any errors in our console, right? Everything looks okay. But obviously the other content is gone away. So this is not really a valid URL for this app anymore, right?

[00:05:44]
We need a team ID. If you wanna show a chat UI, we need to know which team and which channel and there's really nothing interesting to render in the case that we're missing that data. We'll deal with this in a moment. But let's manually try to figure out this for now.

[00:06:01]
So I wanna go teams/li and now we've got LinkedIn. So now, our team.hbs is being rendered. Okay, still we're missing that channel. And so we can't render anything on the right, right? This is also not a valid URL.
>> Mike North: But if we put general here, now we're back.

[00:06:25]
Now this is the chat UI that we've been working on.