Ember:使用｛｛action｝｝标签处理多个事件

Question

我使用的是Ember.js，我试图让div元素有两个不同的操作：一个是当鼠标进入时，另一个是鼠标离开时。我试着做：

<div {{action "stopInfo" on="mouseLeave"}} {{action "startInfo" on="mouseEnter"}}>

但它只触发第一个动作（mouseleave）。

有没有办法在同一个元素上有两个操作？感谢

Answer 1

根据问题#569，不支持一个标记的多个操作助手。要处理多个事件，您应该为此使用自定义Ember.View。在您的情况下，请参阅http://jsfiddle.net/pangratz666/2V9cP/:

把手：

{{#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')
});​

我在这里使用了Ember.alias帮助程序，只是为了说明如何对多个视图事件使用相同的函数。。。

Answer 2

这可能会在Ember（1.13）的下一个版本中得到支持。修复它的PR如下：https://github.com/emberjs/ember.js/pull/11373

Answer 3

我会使用ember可组合的助手。

<button {{action (pipe addToCart purchase redirectToThankYouPage) item}}>
  1-Click Buy
</button>

或

<button {{action (queue (action "backupData") (action "unsafeOperation") (action "restoreBackup"))}} />