从ember组件操作访问jquery事件

Question

我正在尝试使用简单的叠加组件，如果有人点击叠加内容之外，请关闭此叠加层：

<div class="overlay" {{action 'close' on='click'}}>
  <div class="item">
    <form {{action 'submit' on='submit'}}>
      {{yield}}
      {{#link-to closeRoute class="close"}}Close{{/link-to}}
    </form>
  </div>
</div>

该组件如下所示：

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit: function() {
      this.sendAction();
    },
    close: function(param) {
      console.log(param); // -> undefined
      console.log(this);  // -> complete component object, no reference to the event?
      // this.$("a.close").click();
    }
  }
});

这与广告一样，但是，我需要确定点击事件的目标，因为点击项目和表单也会触发此点击（关闭）操作。

问题：如何从组件内的关闭操作中访问具有目标的（jQuery）事件对象？

我正在使用EmberCLI和Ember 1.9

Answer 1

我发现这可以提供所需的结果：

export default Ember.Component.extend({
  classNames: ['overlay-block'],
  didInsertElement: function() {
    var self = this;

    self.$().click(function(e) {
      if (self.$(e.target).hasClass("overlay-block")) {
        self.$("a.close").click();
      }
    });
  }
});

这不会像我预期的那样使用余烬动作。我会暂时搁置这个问题一段时间，看看是否有人想出更多“Ember方式”来做这件事。

更多Ember方式

export default Ember.Component.extend({
  classNames: ['overlay-block'],
  click: function(e) {
    if (this.$(e.target).hasClass("overlay-block")){
      this.$("a.close").click();
    }
  }
});