Reputation: 5421
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
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
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
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