Ember.js:“this.$()”在组件上不起作用

Question

方法 this.$() 不在组件上工作。以下代码：

应用/组件/示例组件.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 元素？

环境：

调试：-------------------------------
调试： 余烬 ： 2.13.0
调试： 余烬数据 ： 2.13.1
调试： j查询 ： 3.2.1
调试：余烬简单身份验证：1.3.0
调试：-------------------------------

Answer 1

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

如果组件方法

由另一个组件方法调用，如 didRender() ，则 this 是组件，this.$()返回组件的 jQuery 元素。所以，这有效：

应用/组件/示例组件.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)：

应用/组件/示例组件.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));
  },
});