Triggering Changes with Actions

Let's call our component button-with-confirmation. We can create it by typing:

ember generate component button-with-confirmation

We'll plan to use the component in a template something like this:

{{button-with-confirmation text="Click OK to delete your account."}}

We'll also want to use the component elsewhere, perhaps like this:

{{button-with-confirmation text="Click OK to send your message."}}

When implementing an action on a component, you need to break it down into two steps:

1. In the parent component, decide how you want to react to the action. Here, we want to have the action delete the user's account in one place, and send a message in another place.
2. In the component, determine when something has happened, and when to tell the outside world. Here, we want to trigger the outside action (deleting the account or sending the message) after the user clicks the button and then confirms.

Let's take it step by step.

In the parent component, let's first define what we want to happen when the user clicks the button and then confirms. In this case, we'll find the user's account and delete it.

In Ember, each component can have a property called actions, where you put functions that can be invoked by the user interacting with the component itself, or by child components.

Let's look at the parent component's JavaScript file. In this example, imagine we have a parent component called user-profile that shows the user's profile to them.

We'll implement an action on the parent component called userDidDeleteAccount() that, when called, gets a hypothetical login service and calls the service's deleteUser() method.

export default Ember.Component.extend({
  login: Ember.inject.service(),

  actions: {
    userDidDeleteAccount() {
      this.get('login').deleteUser();
    }
  }
});

Now we've implemented our action, but we have not told Ember when we want this action to be triggered, which is the next step.

Next, let's implement the logic to confirm that the user wants to take the action from the component:

export default Ember.Component.extend({
  tagName: 'button',
  click() {
    if (confirm(this.get('text'))) {
      // trigger action on parent component
    }
  }
});

Now we need to make it so that the onConfirm() event in the button-with-confirmation() component triggers the userDidDeleteAccount() action in the user-profile component. One important thing to know about actions is that they're functions you can call, like any other method on your component. So they can be passed from one component to another like this:

{{button-with-confirmation text="Click here to delete your account." onConfirm=(action 'userDidDeleteAccount')}}

This snippet says "take the userDidDeleteAccount action from the parent and make it available on the child component as onConfirm."

We can do a similar thing for our send-message component:

{{button-with-confirmation text="Click to send your message." onConfirm=(action 'sendMessage')}}

Now, we can use onConfirm in the child component to invoke the action on the parent:

export default Ember.Component.extend({
  tagName: 'button',
  click() {
    if (confirm(this.get('text'))) {
      this.get('onConfirm')();
    }
  }
});

this.get('onConfirm') will return the function passed from the parent as the value of onConfirm, and the following () will invoke the function.

Like normal attributes, actions can be a property on the component; the only difference is that the property is set to a function that knows how to trigger behavior.

That makes it easy to remember how to add an action to a component. It's like passing an attribute, but you use the action helper to pass a function instead.

Actions in components allow you to decouple an event happening from how it's handled, leading to modular, more reusable components.