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.