Sending Router Events from Templates

Use the {{action}} helper to attach a handler in your view class to an event triggered on an element.

To attach an element’s click event to the edit() handler in the current view:

  1. <a href="#" {{action edit on="click"}}>Edit</a>

Because the default event is click, this could be written more concisely as:

  1. <a href="#" {{action edit}}>Edit</a>

Although the view containing the {{action}} helper will be targeted by default, it is possible to target a different view:

  1. <a href="#" {{action edit target="parentView"}}>Edit</a>

The action handler can optionally accept a jQuery event object, which will be extended to include view and context properties. These properties can be useful when targeting a different view with your action. For instance:

  1. App.ListingView = Ember.View.extend({
  2.   templateName: 'listing',
  4.   edit: function(event) {
  5.     event.view.set('isEditing', true);
  6.   }
  7. });

Any of the templates discussed above will produce an HTML element like this:

  1. <a href="#" data-ember-action="3">Edit</a>

Ember will delegate the event you specified to your target view’s handler based upon the internally assigned data-ember-action id.