Series: Ember Actions
Closure Actions In Ember 2.0 Components-Return Value
Published on Sep 30, 2015
Actions used to be really different than functions, but Ember 1.13’s closure actions have narrowed that gap.
One new lack of difference is return values.
Return values make all sorts of things easier. We give two examples in this video, one of which goes into depth.
Links
- Official blog post introducing closure actions
- Blog post on nuances of return values in closure actions
Code
//in components/color-selector/component.js
actions: {
changeItem(color){
var matches = this.attrs.changeItem(color)
if(matches){
this.$(`.${color}`).effect('pulsate')
}
}
}
//in demonstrations/actions/controller.js
actions: {
changeItem(itemIndex, newColor){
this.set(`itemDetails.${itemIndex}.itemColor`, newColor)
return this.matchesAnotherItem(itemIndex)
}
}
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.
- Introduction to Ember Actions
- Action Bubbling
- ember-modal-dialog
- Actions and Components in Ember 1.x
- Closure Actions in Ember 2.0 Components-Passing Functions
- Closure Actions in Ember 2.0 Components-Metaprogramming with Parameter Currying
- Closure Actions In Ember 2.0 Components-Return Value
- Closure Actions in Ember 2.0 Components-Block Components