Stéphane Piette Stéphane Piette - 10 months ago 89
Javascript Question

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 ?

Answer Source

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


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


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 ...