javascript - 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.$());
  },
});

在网络控制台上出现以下错误:

TypeError: this.$ is not a function

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

环境:

DEBUG: -------------------------------
DEBUG: Ember : 2.13.0
DEBUG: Ember Data : 2.13.1
DEBUG: jQuery : 3.2.1
DEBUG: Ember Simple Auth : 1.3.0
DEBUG: -------------------------------

Answer 1

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

如果组件方法被另一个组件方法调用，例如 didRender()，则 this 是组件，而 this.$() code> 返回组件的 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));
  },
});