Stéphane Piette
Stéphane Piette

Reputation: 5421

Ember : handling multiple events with {{action}} tag?

I'm using Ember.js and I'm trying to have a div element with two different actions : one when mouse enter and one when mouse leave. I tried to do :

<div {{action "stopInfo" on="mouseLeave"}} {{action "startInfo" on="mouseEnter"}}>

But it only trigger the first action (mouseleave).

Is there a way to have 2 actions on the same element ? Thanks

Upvotes: 17

Views: 7779

Answers (3)

Charles
Charles

Reputation: 11778

I would use ember-composable-helpers for that.

<button {{action (pipe addToCart purchase redirectToThankYouPage) item}}>
  1-Click Buy
</button>

or

<button {{action (queue (action "backupData") (action "unsafeOperation") (action "restoreBackup"))}} />

Upvotes: 1

Luke Melia
Luke Melia

Reputation: 8389

This will likely be supported in the next version of Ember (1.13). The PR that fixes it is here: https://github.com/emberjs/ember.js/pull/11373

Upvotes: 10

pangratz
pangratz

Reputation: 16143

As per issue #569 multiple action helpers for a tag is not supported. To handle multiple events you should use a custom Ember.View for that. In your case something like this, see http://jsfiddle.net/pangratz666/2V9cP/:

Handlebars:

{{#view App.ActionView}}
    ... content of div ...
{{/view}}

JavaScript:

App.ActionView = Ember.View.extend({
    stopInfo: function(evt) { console.log('stop info'); },
    startInfo: function(evt) { console.log('start info'); },

    click: Ember.alias('stopInfo'),
    mouseLeave: Ember.aliasMethod('stopInfo'),

    mouseEnter: Ember.aliasMethod('startInfo')
});​

I've used the Ember.alias helper here, just to illustrate how I would use the same function for multiple view events ...

Upvotes: 17

Related Questions