Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember.js {{action}} other than click

Tags:

ember.js

Lets say I have a template with several button elements in it. If I want to watch for a click event then I just use the {{action}} helper. But I can't figure out a way of passing other events like mouseEnter or mouseLeave. I would have thought to use Ember.Button and somehow do it through childViews but it seems to be deprecated.

template

{{#view App.MyView}}
    <button {{action "btnClicked"}}>button1</button>
    <button {{action "btnClicked"}}>button2</button>
{{/view}}

js

App.MyView = Em.View.extend({
    btnClicked: function(e){
       alert('btnClicked');
    },
    btnMouseEnter: function(e){
       alert('btnMouseEnter'); // how to call this?
    }
});​

I know I can use {{action "btnMouseEnter" on="mouseEnter"}} but then I lose the click functionality. Do I need to wrap each button in its own Ember.View? If so, why was Ember.Button deprecated?

Edit:

I think you should be be able to have multiple events trigger the same action

<button {{action "myAction" on="click mouseEnter mouseLeave"}}>button</button>

I implemented this behavior in my fork and here is a jsFiddle demonstrating it working

Edit:

if someone is also interested in this functionality, the discussion is going on here.

like image 495
Ilia Choly Avatar asked Jun 12 '12 05:06

Ilia Choly


2 Answers

Very good question IMHO.

The only way I found is this one: http://jsfiddle.net/Sly7/Zvred/

I think it's a kind of wrapping, so not sure it's a good answer...

like image 125
sly7_7 Avatar answered Oct 28 '22 23:10

sly7_7


Ilia...

The Ember team decided that allowing multiple action helpers on an element like Button wasn't a best practice. Their recommendation is to use a view like sly7_7 suggests. Please review this issue report on Github:

https://github.com/emberjs/ember.js/issues/569

like image 26
commadelimited Avatar answered Oct 28 '22 22:10

commadelimited