Ember 2.x

Ember 2.x Exercise 7 Solution, Part 2


This course has been updated! We now recommend you take the Ember Octane Fundamentals course.

Check out a free preview of the full Ember 2.x course:
The "Exercise 7 Solution, Part 2" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Mike concludes Exercise 7 by adding the functionality for toggling a favorite. He also spends a few minutes answering audience questions.

Get Unlimited Access Now

Transcript from the "Exercise 7 Solution, Part 2" Lesson

>> [MUSIC]

>> Mike North: Now you'll notice that I'm clicking on this thing and it's not actually toggling back. Who has an idea about why this is not working?
>> Speaker 2: Haven't done any remove from ray.
>> Mike North: Right, so we took the click action on the word favorite to mean add. It was explicitly add.

[00:00:27] So I'm gonna actually go a little step further here just to round this out and I'm gonna change the logic a little bit so that we're toggling. We're not really just adding when a click happens. And so I'm just gonna trace my way through. So we've got favorite was clicked.

[00:00:44] I think that's still an appropriate name for this action. I'm passing along the org, so I think the components actually are already flexible enough.
>> Mike North: So here, if the favorite was clicked, we've got favorite item here. So, I'm just going to add the logic right here, so if this get favorites, items index of org is less than zero.

[00:01:21] So if it's absent in the list, add it.
>> Mike North: I'm going to save and make sure that my existing stuff still works. Sweet, it does. Else.
>> Mike North: We're gonna go, unfavorite item. And then that's not a method available on my service so I going to add it
>> Mike North: Just for fun

>> Mike North: Do this.
>> Mike North: And I've forgotten a comma, and I forgot to rename this.
>> Mike North: All right
>> Mike North: Now we're toggling back and forth, so, this rounds it out. Now we have this state that's shareable. The route knows about it. The component knows about it. And you can see how we are using actions to kinda bubble up and alter state and how we can have both data and functionality on the service.

[00:02:55] And we are using a computered property to make a value that we can bind to, based on the state of the component itself and the service we've injected onto the component. Any questions about how this was done, or why I did things the way I did?
>> Speaker 3: There's a question from online.

[00:03:18] It came a little while back, but they don't understand why you're using the list key dot square brackets. Why couldn't that have been listed instead of using the string interpolation approach?
>> Mike North: So, list key, square brackets, why couldn't that have been listed? So, list key, this is gonna be something like

>> Mike North: Like this and as we discussed going through the lead in talk to this, to this exercise to observe an array, you have to either observe the length of the array via square brackets or you observe using at each. If I were to just directly observe listKey, what that means, if I were to just do something like this, effectively what I'm saying is if you set this property to a brand new array, a completely new array, if I set favorites dot items to array literal square brackets, then that would cause the cache here to invalidate.

[00:04:27] But that is not the typical way that you deal with these things. And furthermore, that operation would cause some problems with anything that's observing through square brackets or through at each because potentially or almost definitely, you're returning a brand new object. Discarding the object that everything else was listening to.

>> Speaker 3: So just quick, he's following up on a question, sorry. But he's actually asking not about the brackets so much, as about the back tick to the list argument.
>> Mike North: The back tick to the list argument.
>> Speaker 4: That's the ES
>> Mike North: This here so this is.
>> Speaker 4: String interpolation.

>> Mike North: Yes string interpolation if we look at how it's transpiled. Perfect, this is what it looks like after it's gone through babel. So ultimately this is what you're getting. I have a habit of doing this, because as you build complex strings having plus, plus, plus, plus, plus, plus starts to become annoying.

[00:05:33] And expensive, cuz you create a brand new string at literal every single time you do that.
>> Speaker 2: Aren't you doing that anyway?
>> Mike North: Here you're doing that anyway, you're right.
>> Speaker 2: [INAUDIBLE] browser.
>> Speaker 4: Yeah one's browser support [INAUDIBLE].
>> Mike North: Yeah.
>> Speaker 4: Six string literals then it won't transpile into that.

>> Mike North: Actually
>> Mike North: So Chrome is one of those browsers that does it. Chrome will actually read an ES6 string literal directly. But again we're building ES5 because we don't know that we're using Chrome for a fact.
>> Speaker 5: Can you explain now line three.
>> Mike North: Line three.
>> Speaker 5: It's not doing.

>> Mike North: You guys gotta watch the ES6 Frontend Masters talk. This is called a destructured assignment. And the equivalent is, I want to get rid of the default, so I will write it out normally. const computed equals Ember.computed. So I'm just kind of grabbing some object off of another object, so that I can basically use it here without having to say ember, ember, ember, ember, ember throughout all of my quote.

>> Mike North: Any other questions?
>> Speaker 2: I notice you didn't reach for the ember [INAUDIBLE] array contains.
>> Mike North: [CROSSTALK] Yes, I've seen enough feedback in pull requests and things people asking for, is this real, is this available on all browsers? So there is array contains and hopefully that is coming to JavaScript natively soon, but this is, people know what this means.