The {{action}} helper registers an HTML element within a template for DOM event handling and forwards that interaction to the view's controller or supplied target option (see 'Specifying a Target').

If the view's controller does not implement the event, the event is sent to the current route, and it bubbles up the route hierarchy from there.

User interaction with that element will invoke the supplied action name on the appropriate target.

Given the following Handlebars template on the page

        
              <div {{action 'anActionName'}}>
  click me
</div>

And application code

        
              AController = Ember.Controller.extend({
  anActionName: function() {}
});

AView = Ember.View.extend({
  controller: AController.create(),
  templateName: 'a-template'
});

aView = AView.create();
aView.appendTo('body');

Will result in the following rendered HTML

        
              <div class="ember-view">
  <div data-ember-action="1">
    click me
  </div>
</div>

Clicking "click me" will trigger the anActionName method of the AController. In this case, no additional parameters will be passed.

If you provide additional parameters to the helper:

        
              <button {{action 'edit' post}}>Edit</button>

Those parameters will be passed along as arguments to the JavaScript function implementing the action.

Event Propagation

Events triggered through the action helper will automatically have .preventDefault() called on them. You do not need to do so in your event handlers.

To also disable bubbling, pass bubbles=false to the helper:

        
              <button {{action 'edit' post bubbles=false}}>Edit</button>

If you need the default handler to trigger you should either register your own event handler, or use event methods on your view class. See Ember.View 'Responding to Browser Events' for more information.

Specifying DOM event type

By default the {{action}} helper registers for DOM click events. You can supply an on option to the helper to specify a different DOM event name:

        
              <script type="text/x-handlebars" data-template-name='a-template'>
  <div {{action 'anActionName' on="doubleClick"}}>
    click me
  </div>
</script>

See Ember.View 'Responding to Browser Events' for a list of acceptable DOM event names.

NOTE: Because {{action}} depends on Ember's event dispatch system it will only function if an Ember.EventDispatcher instance is available. An Ember.EventDispatcher instance will be created when a new Ember.Application is created. Having an instance of Ember.Application will satisfy this requirement.

Specifying whitelisted modifier keys

By default the {{action}} helper will ignore click event with pressed modifier keys. You can supply an allowedKeys option to specify which keys should not be ignored.

        
              <script type="text/x-handlebars" data-template-name='a-template'>
  <div {{action 'anActionName' allowedKeys="alt"}}>
    click me
  </div>
</script>

This way the {{action}} will fire when clicking with the alt key pressed down.

Specifying a Target

There are several possible target objects for {{action}} helpers:

In a typical Ember application, where views are managed through use of the {{outlet}} helper, actions will bubble to the current controller, then to the current route, and then up the route hierarchy.

Alternatively, a target option can be provided to the helper to change which object will receive the method call. This option must be a path to an object, accessible in the current context:

        
              <script type="text/x-handlebars" data-template-name='a-template'>
  <div {{action 'anActionName' target="MyApplication.someObject"}}>
    click me
  </div>
</script>

Clicking "click me" in the rendered HTML of the above template will trigger the anActionName method of the object at MyApplication.someObject.

If an action's target does not implement a method that matches the supplied action name an error will be thrown.

        
              <script type="text/x-handlebars" data-template-name='a-template'>
  <div {{action 'aMethodNameThatIsMissing'}}>
    click me
  </div>
</script>

With the following application code

        
              AView = Ember.View.extend({
  templateName; 'a-template',
  // note: no method 'aMethodNameThatIsMissing'
  anActionName: function(event) {}
});

aView = AView.create();
aView.appendTo('body');

Will throw Uncaught TypeError: Cannot call method 'call' of undefined when "click me" is clicked.

Additional Parameters

You may specify additional parameters to the {{action}} helper. These parameters are passed along as the arguments to the JavaScript function implementing the action.

        
              <script type="text/x-handlebars" data-template-name='a-template'>
  {{#each person in people}}
    <div {{action 'edit' person}}>
      click me
    </div>
  {{/each}}
</script>

Clicking "click me" will trigger the edit method on the current view's controller with the current person as a parameter.

Class Ember.Handlebars.helpers

Methods

Properties

Events