从 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 way' 的做法。

从 ember 组件操作访问 jquery 事件

Access jquery event from ember component action

ember.js

更多Ember方式