Ember.js：“this.$()”不适用于组件

Question

方法this.$() 不适用于组件。以下代码：

app/components/example-component.js：

import Ember from 'ember';

export default Ember.Component.extend({

  didRender() {
    Ember.$('body').click(this.exampleMethod).click();
  },
  exampleMethod() {
    console.log('"this" on exampleMethod():');
    console.log(this.$());
  },
});

在 Web 控制台上出现以下错误：

TypeError: this.$ is not a function

this.$()如何使用以及如何获取组件的jQuery元素？

环境：

调试：-------------------
调试：Ember：2.13.0
调试：Ember 数据：2.13.1
调试：jQuery：3.2.1
调试：Ember 简单身份验证：1.3.0
调试：-------------------

Answer 1

在组件方法中this 不代表组件本身，而是代表调用该方法的元素。

如果组件方法被另一个组件方法调用，比如didRender()，那么this就是组件，this.$()返回组件的jQuery元素。所以，这行得通：

app/components/example-component.js：

import Ember from 'ember';

export default Ember.Component.extend({

  actions: {
    exampleAction() {
      console.log('"this" on exampleAction():');
      console.log(this.$());
    },
  },
  didRender() {
    this.send('exampleAction');
    console.log('"this" on didRender():');
    console.log(this.$());
    this.exampleMethod();
  },
  exampleMethod() {
    console.log('"this" on exampleMethod():');
    console.log(this.$());
  },
});

如果组件方法被某个附加到 DOM 元素的事件调用，则 this 是 DOM 元素，this.$() 不起作用。必须改用Ember.$(this)：

app/components/example-component.js：

import Ember from 'ember';

export default Ember.Component.extend({

  didRender() {
    console.log('"this" on didRender():');
    console.log(this.$());
    Ember.$('body').click(this.exampleMethod).click();
  },
  exampleMethod() {
    console.log('"this" on exampleMethod():');
    // console.log(this.$()); This doesn't work
    console.log(Ember.$(this));
  },
});