Javascript 余烬.js:“；本.$（）”；不在组件上工作

方法

此。$（）

在组件上不起作用。以下代码：

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

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

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));
  },
});

在web控制台上获取以下错误：

TypeError: this.$ is not a function

如何使用

this.$（）

以及如何获取组件的jQuery元素

环境：

调试：-------------------------------------
调试：余烬：2.13.0
调试：余烬数据：2.13.1
调试：jQuery:3.2.1
调试：余烬简单验证：1.3.0
调试：-------------------------------

---

在组件方法

中，此

并不表示组件本身，而是表示调用该方法的元素

如果组件方法由另一个组件方法调用，如

didler（）

，则

this

就是组件，而

this.$（）

返回组件的jQuery元素。因此，这是可行的：

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

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

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));
  },
});

如果组件方法由附加到DOM元素的某个事件调用，那么

this

就是DOM元素，

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

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

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));
  },
});

---

在组件方法

中，此

并不表示组件本身，而是表示调用该方法的元素

如果组件方法由另一个组件方法调用，如

didler（）

，则

this

就是组件，而

this.$（）

返回组件的jQuery元素。因此，这是可行的：

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

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

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));
  },
});

如果组件方法由附加到DOM元素的某个事件调用，那么

this

就是DOM元素，

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

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

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));
  },
});

---

嗨，谢谢你的帖子，我想在twiddle中得到异常，但在日志中它说未定义，而不是引发错误。看，这是因为init（）方法。如果使用didRender（）方法，将得到不同的结果。这确实是一个正确的结果。当像Ember.$（'body'）这样的事件调用该方法时，会出现问题。单击（this.exampleMethod）。单击（）；我正在更新问题和答案以显示它。嗨，谢谢你的帖子，我想在twiddle中获得异常，但在日志中它说未定义，而不是引发错误。看，这是因为init（）方法。如果使用didRender（）方法，将得到不同的结果。这确实是一个正确的结果。当像Ember.$（'body'）这样的事件调用该方法时，会出现问题。单击（this.exampleMethod）。单击（）；我正在更新问题并询问答案以显示它。