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.
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...
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With