javascript - Ember：使用 {{action}} 标签处理多个事件？

Question

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

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

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

有没有办法对同一个元素进行 2 个操作？谢谢

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-composable-helpers。

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

或者

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