Series: Ember Actions
Closure Actions in Ember 2.0 Components-Block Components
Published on Oct 02, 2015
The block form of components is really useful for providing common visual idioms. Wrap a block component around part of your template and you’ve changed how it displays.
In this video we show how to work with closure actions within a block component.
Links
Code
//demonstrations/actions/template.hbs
//calling the block component, sending in and using actions
{{#collapsible-box changeItem=(action "changeItem" index) as |close changeItem|}}
{{control-accessory changeItem=(action changeItem) itemName=item.itemName itemColor=item.itemColor}}
<button {{action close}}>Close Box</button>
{{/collapsible-box}}
//components/collapsible-box/template.hbs
//passing actions through yield
<div style="border: 1px solid black">
{{#if isShowing}}
<button {{action 'close'}} class="pull-right">x</button>
{{yield (action 'close') attrs.changeItem}}
{{else}}
<button {{action 'open'}}>Click to reopen</button>
{{/if}}
</div>
Transcript
In this episode we’ll be talking about how to use closure actions with block components. So in this example, I’ve taken what we had previously and put it inside a collapsible box that we can close and reopen.
This is how it looks before the box.
And we’ve decided that users don’t necessarily want to see every single accessory, so we'll provide a way to close that up, and we'll want to reuse it in different parts of the application. So it can’t be part of the control-accessory
component. It has to be a separate component.
So we’ll generate a component in the pod
format, called the collapsible-box
,
We’ll start by wrapping the control-accessory
component within this component block,
and we’ll give this component a className
of collapsible-box
Then, we’ll give this box some styling.
Let’s see how it looks now.
It’s definitely a box, but it’s not collapsible yet.
But before we get to collapsing it, I want you to note that the old buttons still work. So this context is still the context of the controller
rather than of this component.
So we’ll create the open
and close
actions on this component, and setting it to isOpen
by default.
Then in the template
, we’ll check to see if it’s open. If it is, we’ll show what’s there, and then give them a button that allows them to close. If it isn’t open, then we’ll say that it’s not open and give them a button that allows them to open it.
So now we see that we can close and open the various boxes.
So now we have a perfectly good open and close collapsible box, and we didn’t actually have to do anything special with the actions to get it that way.
However, what if we wanted to add a close
button that was only in this instance of collapsible box, not in other collapsible boxes elsewhere? How would we do that?
So it starts in the collapsible-box
template. We yield the action
close
,
and so that’s passing that action into the template block here, and it’ll get passed as close
.
And so now we have close
to work with here, and so we’ll just use it as a variable right there,
and we can see that our button is working. So we’re saying we’re going to call the action in variable close
, which is passed in by the block component. And then, that action is the close
action, we happen to name them the same thing, on this block component here. So it’ll eventually call this.
So that’s the basics, but I want to show you every part of this pipeline that we can access. So we’ll go ahead and take our changeItem
action and we’ll unnecessarily refactor it to use every part of this.
So first, we’ll pass in the changeItem
action into the collapsible box, and we’ll call it changeItem2
. Notice that we’re passing an index
here. And later on when we get here, we will no longer be passing in that index
.
So then we’ll go to the template of the collapsible-box
, and in the yield
as a second parameter, we’ll pass in attrs.changeItem2
.
Then here, we have our first attr
which is close
, and our second attr
which is changeItem2
. We’ll go ahead and call it changeItem3
, showing that we can change the name of it if we want.
And then here, we’ll just have changeItem
as changeItem3
.
So now, these are working just like they did before, except now it’s being passed through here,
and here,
going through the yield
, and being passed through here,
instead of just going straight to the controller from here.
And obviously, you wouldn’t want to do this exact example in a real life application, but you can probably see how different parts of it could be useful to you.
And there we go. That wraps up "Closure Actions". If there’s anything big that we missed, go ahead and send me an e-mail, and I may circle back and cover it. Thanks, and I’ll see you next week.
- 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