Ember 2.x Exercise 6 Solution, Part 1

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

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

[00:00:04]
>> Mike North: Just to restate the problem we're solving here. Right now, if we look at orgs.hbs and similarly repos.hbs, we've got some complexity here. And I've just asked for some increased stuff in the repos list where we're seeing star count or, sorry, watcher count and fork count. You can see how in a large project this would get unmanageable, where we don't have this tool yet to encapsulate complexity.

[00:00:41] Components are the go-to thing for that in Ember. So what we're gonna do is make a component for each org in the orgs list and a component for each repo in the repos list. So as usual, starting with Ember CLI and generate some code.
>> Mike North: We're gonna generate a github-org and a github-repo.

[00:01:10]
>> Mike North: And then get back to the code. And I'm just gonna right away switch this over. And just to illustrate how this contract works, on the right side of this assignment, that's sort of the outside world's understanding of this data. And then on the left side of this assignment is the component's internal property name that we want to connect to, to establish a contract between the inside world and the outside world.

[00:01:45] And I'm also going to prepare for handling an action. So I'm gonna say on favorite clicked equals favoriteClicked. Make sure I don't have a spelling error. Worth reminding people that the right side of this, when you're talking about an action, make sure it's a string. It's the name of the action, right, as opposed to binding data which is not a string.

[00:02:19] And I'm just going to copy this to my clipboard. Get rid of this, hit Save, and my list is gone.
>> Mike North: And we're done. No [LAUGH]. So I'm just gonna directly paste in what used to be in the each loop. And because I've kept the naming of org as org, things are already looking pretty good here.

[00:02:48] I have lost my bullet points. And if I take a look what's going on, it is because each instance of this component is a DIV. It's no longer an LI, right? And of course it is not styled like an LI would be styled. So we can fix that.

[00:03:09] By default, components are DIVs, but we can customize that with this tagName property. And inspect element again just to, it's pretty obvious at this point, but now it's an LI. So you can use pretty much whatever element that you want. I'm also going to add an action here.

[00:03:48]
>> Mike North: And just making sure I keep my contract, oops. So going back to org.hbs, this is what I want to send through sort of the encapsulation boundary of the component. I wanna send an action with that name through, so that ultimately favoriteClicked is what we're trying to call.

[00:04:12] And it actually should connect up nicely with the existing favoriteClicked action I have. As long as I pass the org along, it should work. So I'm actually gonna change this to illustrate, to make sure we don't get confused as to what's going on. So, I'm gonna call this favoriteWasClicked.

[00:04:39]
>> Mike North: So favoriteWasClicked is a concept that is only important internally to this component. And I don't need to actually pass the org along here, cuz remember, this component exists in the context of an individual org. It's a property on the component itself. So no longer am I in this each loop when I'm defining this action.

[00:05:02] I'm inside something that is already sorta scoped to a component. Sorry, scoped to an org. So here I'm going to sendAction, on-fave-clicked, and I'm gonna pass the org along. Remember, this.get.
>> Mike North: And let's see what happens.
>> Mike North: Fantastic, I can see in my console it's printing out what I expect it to print out.

[00:05:39] So we're done with the github-org component. So I'll close that.
>> Mike North: Similar task here, I'm just gonna grab this link. And remember that the component, it is associated with a DOM element in and of itself. In this case, that's the LI, so I'm going to get rid of the LI entirely.

[00:06:08]
>> Mike North: So we'll go to github-repo and we'll put our link there, and,
>> Mike North: Again illustrating inside world versus outside world, this r is a local variable that exists within the scope of each. It changes per iteration. So we're connecting that to the component's internal concept of repo, so it's available in the component's template.

[00:06:41] And you Save, and let's drill in.
>> Mike North: And so we have repos here. Again, lost our bullets.
>> Mike North: So tagName is the fix for that.
>> Mike North: Fantastic, and I also asked for star counts, or sorry, fork count and watcher count. And those are available on the repo object itself.

[00:07:11] I'm going to probe around, cuz I don't really remember what the names of the properties are for that. So I'm gonna do a, use my handy Handlebars debugger helper. And as instructed here, I wanna use context to debug this template.
>> Mike North: context.repo, and now we can sort of see into this object.

[00:07:42] And I think it's forks, forks_count, that looks promising. So I'll leave that here. And watchers_count, also promising.
>> Mike North: Good guy, paren matcher is screwing me up here, and,
>> Mike North: Just to make it look sort of pretty.
>> Mike North: We'll get rid of our debugger, and then we're good to go.

[00:08:42]
>> Mike North: Awesome, so now we have Forks and Watchers. So we could make this even more rich. We could have the little GitHub star buttons or whatever, and really enrich this component significantly, without the app, the consuming code, really having to change at all. So this is just sort of the concept of, how do we represent a github-org in the list?

[00:09:13] That's now an isolated problem, as long as we can keep the contract the same. And in this case, it's likely. We're passing in the repo. As long as it's an LI, we should be able to extend this pretty significantly without having to worry about repos.hbs getting messy. So let me make sure I have gone through all of the steps here.

[00:09:41]
>> Mike North: So the favorite behavior, we verified that that works. And we have the fork count and watcher count. So, this is my solution to number 6.