Transcript

Today we’re going to be looking at another aspect of closure actions, and that aspect is how they can return a value. We’ll see some situations that can be useful in.

So we have our site, Accessor.ly, and we can change the color of different accessories. What we want to do is add a feature where it flashes when we select an accessory of the same color as a previous accessory.

We’ll provide the flashing effect with jquery-ui.

We’ll add in a class with the color name, since this is jquery and that's what it needs.

If we had a component for the button, then we could do something more Ember-y.

Then, after we change the item color, we’ll find that button then apply the pulsate effect on it with jquery.ui.

This is what the effect looks like. But as you can see, it applies the effect no matter what the color is, whether it’s matching or not, and we want it to do it only when it’s matching. This is where return values can help us.

So we’re going to write the rest of this function as if it’s already returning a return value, and then we’ll see what we need to do to make that actually happen.

So here in our changeItem action, it gives a return value, just like a regular function would, and this return value will be
another method matchesAnotherItem that we’ll write right now.

So some interesting things about this are that we’re writing it just like another function. So the mental model is way more similar than the previous one of passing up the action string. And the actual details of this aren’t super interesting. It’s just checking to make sure that there’s another item that has that same color.

So does this work? Let’s find out.

It doesn’t flash when we have an unmatching item, and it does flash when we have a matching item, so our return values are working great.

Before we move on some other applications, I want to review how the return value works. So you have this action which is just a regular function now and it has a return value,

and then when you call that function, you can get the return value.

So there’s nothing new here. The only new thing is that you’re not as limited as you were before, and this opens up some great possibilities.

Let’s say that the function being passed down is the save function. Now the save function, it normally returns a promise, and with return values, now you can do that. You can have promise handling on your lower components without breaking data-down/actions-up.

So that’s return values and closure actions, and I’m sure you can think of a lot more possibilities for your own apps, since you’re already used to thinking in functions, and this is much more intuitive than doing the string passing that was actions previously.

So in this week’s pro-episode, we'll be talking about how to use block components and how to pass actions through there, and we can do some really cool effects, like here we have a collapsible box, that wraps around our previous stuff.

I look forward to seeing you then.