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

Question

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

Answer 1

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