This course has been updated! We now recommend you take the Ember Octane Fundamentals course.
Transcript from the "Exercise 3 Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Mike North: I've undone the changes that I had when I was just messing around and I posted a link to the commit in case anyone wants to look at a silly example with authentication and adding one, two, three. So now we're back on the Critical path for building our GitHub app.
[00:00:23] So, and I'm just going to look at this to make sure we do everything in order here. So we're going to create a service and add an items property to it, which will be an array. And then inject it onto the route for the orgs page. All right.
[00:00:39] So
>> Mike North: Ember g service favorites. All right, and we've created our service. And that's actually all we need from ember CLI this time. So we'll go into services, add items and add new array literal here, so remember it's a single term. This object, the influence of the service, and thus the array within it will be shared across all object I eject this on to.
[00:01:19] Then I'm going to go to the routes and find the orgs route. And I'm going to use the quick version of this. Without a name remember that it's equivalent to this, but It will infer from the property key that it's the favorite service that I want. So the next thing we're gonna do is tweak our each loop on orcs page.
[00:01:53] So that I have something to click with an action bound to it. Fair enough.
>> Mike North: I'm just gonna go here. Reformat things a little bit.
>> Mike North: Something saying favorite, and I'm gonna bind my action.
>> Mike North: And then I'm gonna pass in the org, the whole org itself.
>> Mike North: And we'll see where we're at.
[00:02:39] So click and I get an error. It's telling me that I have nothing handling this action what a surprise. So if I go back to my route and create my actions object and implement this taking in the org as an argument, because I'm passing it along in my action binding I can do this get favorites.items addObject org.
[00:03:17] And I don't see anything happening, because we gotta go to the next step. So I'm adding the item, and then I want to log to the console, every time I add an item to the array. So, I added this just in an effort to illustrate how it's not just about sharing data, but you can share functionality.
[00:03:41] This can be sort of a common module, obviously with a single ten that's really about state but you can have methods that are used to manipulate or can read that shared state which are also part of the service. So I want to make this sort of thing called favorite item.
[00:04:03] This get items addObject item, and then console log items.
>> Mike North: And then go back to my route, and I'm gonna actually just grab the favorite service
>> Mike North: And this should work.
>> Mike North: Okay, it is working, except I'm just gonna add something else here, map. I just want to log the IDs, which I'm using as handy-dandy error function four.
[00:04:51] And now, when we click on things, and in fact when we click on them repeatedly, you can see that the uniqueness check is in fact working, this is just Chrome's indication that I've logged the exact same things six times, so there you go. So now-
>> Speaker 2: What was the map functionality?
[00:05:09]
>> Mike North: Could you repeat that please?
>> Speaker 2: What was the map functionality?
>> Mike North: Map is a higher order function on array, on the prototype for array. Which lets you essentially take an array of items and create an equally sized second array where each item in the array is derived.
[00:05:33] Each item in the destination array is derived from the source array as defined by the function that you pass into it. So let me make this less confusing.
>> Mike North: So that is the verbose way of defining it. But now we have ES 2015, and so it is just this.
[00:06:01]
>> Mike North: This is watch, people use ES6 freely in Ember apps, because Babel is baked in. And you can see how I'm defining my functions the ES6 way. You're going to see a lot of this code all over the place. So definitely brush up. If this looks a little unfamiliar.
[00:06:24] I'm just going to reformat this a little bit. Make it clear. And there we go. That is. That's the solution. So we're through exercise three. I'm going to commit. And push to master. Let me take some questions first.
>> Speaker 3: Yeah, just a couple here. Can you explain the difference between add objects and push object?
[00:06:45]
>> Mike North: Good question. I'll actually look at the docs for that.
>> Speaker 2: I'm gonna guess that push object is check the difference.
>> Mike North: That is my suspicion, but I wanna make absolutely sure. Looks just like push, if not present. That's it, that object makes the presence check first. That's it.
[00:07:14] Any questions?
>> Speaker 3: Is there a way to look at services in the inspector?
>> Mike North: Yes there is. An excellent question. So, you have this object in the event section. You have this thing called container, and maybe we'll have time to talk deeply about the container later, but the idea is that this is where the factories of ember objects live and this is where singletons live, basically anything that you can refer to by a name like the routes live here which is why we can use strings in link two instead of passing the route Module itself.
[00:07:59] The container is where that mapping exist. So if we look here, we can actually see all of our routes registered here. You can see the service here. I'm just saying, interesting, I expect it to be there, I don't know why it's not there.
>> Mike North: [LAUGH] Yeah. Not sure.
[00:08:21]
>> Mike North: It clearly exists. Right? Nope that's not it. We're using it, but maybe this is a bug in the Ember inspector. Don't know. Sorry. [LAUGH]
>> Speaker 2: [LAUGH] It's in mine.
>> Mike North: It's in yours.
>> Speaker 2: I mean, I did the same thing you did.
>> Mike North: Maybe we're using different versions or something.
[00:08:43] Or, another possibility. I have a much better answer now. So, services are instantiated lazily. And in this case, there is no need for the favorite service until I actually click on something. So if I refresh, and I see I have two services here. And then I click. And the inspector is not actually bound to the app.
[00:09:09] So I have to go away and come back. Now you see we have three services. Here's the favorite service. And you can actually even click on this download site in E. And what that does is it stores the service itself to a global variable in your console. And so.
[00:09:31]
>> Mike North: I can actually access it directly. So there's what I just favorited. As you change it
>> Mike North: It should keep going. Yep, so there you go. Yep, so container is where you look there, and keep in mind services created lazily, so it was absolutely correct that did not exist until I favored it.