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元素？

环境：

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

Ember.js: "this.$()" 组件不工作

Ember.js: "this.$()" not working on component

javascript

jquery

ember.js

ember-components