Handling User Interaction with Actions

Components allow you to define controls that you can reuse throughout your application. If they're generic enough, they can also be shared with others and used in multiple applications.

To make a reusable control useful, however, you first need to allow users of your application to interact with it.

You can make elements in your component interactive by using the {{action}} helper. This is the same {{action}} helper you use in application templates, but it has an important difference when used inside a component.

Instead of sending an action to the template's controller, then bubbling up the route hierarchy, actions sent from inside a component are sent directly to the component's Ember.Component instance, and do not bubble.

For example, imagine the following component that shows a post's title. When the title is clicked, the entire post body is shown:

<script type="text/x-handlebars" id="components/post-summary">
  <h3 {{action "toggleBody"}}>{{title}}</h3>
  {{#if isShowingBody}}
    <p>{{{body}}}</p>
  {{/if}}
</script>

App.PostSummaryComponent = Ember.Component.extend({
  actions: {
    toggleBody: function() {
      this.toggleProperty('isShowingBody');
    }
  }
});

JS Bin

The {{action}} helper can accept arguments, listen for different event types, control how action bubbling occurs, and more.

For details about using the {{action}} helper, see the Actions section of the Templates chapter.