Series: Ember Actions

Introduction to Ember Actions

Published on Sep 09, 2015

Actions are how we make stuff happen in Ember, and they're becoming even more important in Ember 2.0.

In this video we learn the basics of using the action helper, including where to put them on your template and controller, using parameters, and working with a wider variety of browser events than just clicking.


Links

Code

Call actions in your template with the action helper

<button {{action 'putOnHat'}}>Put on a hat</button>

Catch it in your actions hash in the controller

actions: {
  putOnHat(){
    this.set('wearingAHat', true)
  }
}

You can also pass parameters

<button {{action 'putOnHat' 'red'}}>Put on a hat</button>
actions: {
  putOnHat(color){
    this.set('hatColor', color)
    this.set('wearingAHat', true)
  }
}

Finally, you can use the on argument to make the action respond to browser events:

<button {{action 'putOnHat' 'red' on="mouseEnter"}}>Put on a hat</button>

Transcript

Hey and welcome to our 4-part series on Ember actions. In this first part, we’ll be doing just the introduction, the basics of working with actions. Then, we’ll show how actions bubble up from the controller to the route to the routes above that.

Then we’ll be talking about actions and components and how they can work together. And finally, we’ll be talking about closure actions, which were introduced in 1.13. Let’s get started.

Our example in this series 00:26 will be following the startup, Hat.io, which solves a very common problem, that your hair is naked. So you go to the website and you ‘put on a hat’. But when you click this button, nothing happens. That’s because we haven’t attached an action yet. So in our template, let’s go to the button tag and give it an action. We’ll name that action, ‘put on hat’. Then when we try to click this, still nothing happens. That’s because nothing has handled that action, as we can see in this error.

We’ll fix this in the controller. First, we’ll make an actions hash. That’s where we will store all the actions. And then we use the ‘put on hat’ or create that method. And then we’ll take an action. In this case, we’ll set the ‘hasHat’ variable to true. We want to show the user that they’ve set their hat to true.

So in the template, we’ll have an ‘if’ statement. If ‘hasHat’ is true, we’ll say ‘Sweet hat, bro!’. Otherwise, we’ll be encouraging them to put on a hat. Now we see it in action and it works.

But sometimes, even with the most awesome service, people want to unsubscribe, so we need to give them a way to take off the hat. Luckily, the solution is easy. Just use another action. So put the ‘take off hat’ action in a button, then add the ‘take off hat’ action to our actions hash and have it set ‘hasHat’ to false. So now, users can subscribe and unsubscribe. Perfect startup.

But then the startup wants to expand a little bit and have different colored hats. We’ll set the default color as blue in the hat color variable, and then we’ll use ‘hatColor’ to tell the user what color of hat they’ve selected, as well as styling it. This is what it looks like.

Now, let’s use params to have the user select which type of hat they want to wear. We’ll have them select from several different colors. And then in template, we’ll loop through those colors, and pass that color as a parameter to the action. Then, in the ‘put on hat’ action, we’ll take that color as a parameter, and set ‘hat color’ to that color. Here’s this working in the app. It passes in the parameter and sets it to that color.

So with the new hat colors, and the decrease of the word ‘bro’ on their site, sales have skyrocketed. Hat.io is doing really well. But the investors are getting restless still. They want more money. So, they’re going to introduce ‘zero-click’ purchases, a one up on Amazon’s one-click purchases.

What they’re going to do is anytime you roll your mouse over one of these, it purchases it for you. This is done by taking advantage of the mouse over event. So we do ‘on=mouseEnter’, and then whenever the mouse enters this button that the action is set on, it’s going to fire the action. So the user is moving their mouse around the page, they accidentally enter the orange button, and it automatically puts on the orange hat. Sales are skyrocketing.

Of course, there are a lot of other, more ethical ways to use the ‘on equals’ in an action. For example on the ‘mouseEnter’, you could keep on using that but use it to play a sound or highlight something, instead of using it to purchase a hat. And there are several other browser events you can use there. And I go over browser events more in Episode 50.

So let’s review what we’ve learned today. You can use the action helper, within an html tag, to call a method on the actions hash, and that will do that action by default when you’re clicking. But, if you do an ‘on equals’, you can do something like ‘mouseEnter’. You can also pass in parameters, like color, and then that action will take those parameters.

So those are the basics. If you want to learn more, in the coming episode we’ll learn about ‘Action Bubbling’, how you can send it to more than just the controller. And then we’ll learn about how to declare ‘Actions and Components’ and pass them between. Finally, we’ll learn about ‘Closure Actions’. 73 and 75 will be pro-episodes, but a pro-subscription is less than the cost of a hat. I hope to see you then.

Ember Actions

Subscribe to our mailing list