This course has been updated! We now recommend you take the Ember Octane Fundamentals course.
Transcript from the "Exercise 6" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Michael: This exercise, building on top of what we just did, I want to componentize a few things in our app. I want to componentize two things. One is a github-org and one is a github-repo. And these are just gonna be basically the contents of your each loops in your templates.
[00:00:30] We're gonna move away from explicitly saying an LI with a link in it to this URL and we're instead going to have a component for each of those. And what we're gonna do after making sure the favorite behavior still works, you should continue to see the console.log stuff working.
[00:00:53] When you click favorite, you should see a list growing that you log out to the console. And, additionally, I want you to increase the complexity of the repo component by just printing out to the screen the number of forks and the number of watchers on each repository in the list.
[00:01:15] And I think it's just watchers_count and forks_count. Those are the attributes available on the object we get from GitHub. So I wanna make sure that there's ample time for people to get through this themselves. So let's allow 20 minutes for this. Any questions?
>> Speaker 2: There's one in chat.
[00:01:38] How can a component communicate to a parent and vice versa?
>> Michael: To a parent component.
>> Speaker 2: To a parent component, yes sir.
>> Michael: Yes. So the typical way of doing that is, well, let me start by saying encapsulation is important and to start carrying about what your parent is is a little bit dangerous because it breaks encapsulation.
[00:02:08] So the proper way to do this, if you remember when we each over something, we have that local variable for the current item in the list. Typically, you'll want to pass your parent component to your children, right? You wanna pass the instance of it to your children so that it's available for them to use, and I will show you what that looks like.
[00:02:33] So we just make some space here. You would do something like this.
>> [COUGH]
>> Michael: If that makes sense there. So there are alternate approaches to doing this that involve traversing upwards through either the component hierarchy, which is a JavaScript understanding of the organization of components, or worse yet, traversing through the DOM and then trying to look in the view registry of like looking up an Ember view by ID.
[00:03:22] These are both pretty brittle. And add-ons that have taken approaches like that have broken as those private APIs have changed. What you have here will absolutely work. And so there's a way that you can yield this out of a component. You can make that available within this block scope here, right, just the same way that each works.
[00:03:52] And then you can pass that to any children explicitly so that you're still playing by the rules here. You're still passing things through the contract to make them available to the child component.