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 "Actions" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Actions are the primary means for handling user interaction. The action-binding component is similar to data-binding and can be handled by routes, components, views, and controllers.

Get Unlimited Access Now

Transcript from the "Actions" Lesson

>> [MUSIC]

>> Mike North: Let's move onto actions. And again, I'm gonna go through a small silly example just to illustrate how these things fit together before I set you guys loose next. So there will be plenty of opportunity to see how these things work for real in code. So actions are your go to thing for handling user interaction.

[00:00:28] You've heard the term data-binding which is like when you've already used data-binding. When you're using each and then you're printing out and your linked to helper, you're using the org id as the text for your links. If you were to change that JavaScript object, there would be data-binding there.

[00:00:56] So, and the HTML would update automatically is the point. So action-binding is another way of connecting template with code. And in this case, you're binding an act that the user performs on a DOM element or a component, and potentially you can programmatically fire off actions and have them received somewhere.

[00:01:22] But you can essentially connect an action handler with an action, and the default action is click. So if, on the lower left here, we set up a span and used the action handlebars helper in this way, it will fire off an action called thingWasClicked. And then in a route, we have this actions object that will contain in all actions that this route is inter-designed to handle, and it'll send off an alert like this.

[00:02:01] So, similarly, to link to, where you can pass data as the last parameter, in the case of link to, it's populating dynamic segments. Here, the third through nth arguments will simply be passed along as arguments to the action handler. So, here we're passing 123 in the template file.

[00:02:27] And you can see that we can accept an argument in the action handler and deal with that. And so you can imagine if we were, say, within each loop of the organization list, we wanted an action that would operate on an organization, we need the action handler to know which organization are we talking about.

[00:02:48] And so this is how you would pass that data along in order to have the right context to deal with it. Everyone set on actions? So I should also point out that actions are heavily emphasized in the 2.0 latest Ember idioms. If you use data-binding to try to handle user interactions like if you make heavy, heavy use of data-binding, you can end up with some sloshing problems, where you lose the context of what the user was doing.

[00:03:32] You just know that instead of knowing that the user clicked on a checkbox, you just know that this property was set from true to false. But you don't know whether it was done programmatically or via a user clicking, so you get disconnected from the user's behavior. And that kind of implementation in aggregate can cause some difficult to deal with performance problems.

[00:04:01] So what we say, the catch phrase is, actions up, bindings down. And that means actions should be driving changes to data. When the user clicks, and that means do something, the action is the mechanism for handling that. And then for a change in data, percolating back up and changing what's displayed on the screen, that is what you use data-bindings for.

[00:04:29] Does that make sense?
>> Speaker 2: They're gonna ask if you were gonna talk about closure actions?
>> Mike North: I'm not going to talk about this right now. I'm trying to get three simple chunks in place so that we can get on, get you guys coding again.