组件中未定义的灰烬“ this”

Question

我正在尝试创建一个进度条，该进度条会随着更多挑战的完成而更新。但是，组件无法访问该属性，因为该属性是未定义的。

我已经注入了服务，并且试图从服务的属性创建计算属性。但是，除非在调试中，否则始终是未定义的。

import Ember from 'ember';

export default Ember.Component.extend({
  progress: 0,
  game: Ember.inject.service(),
  events: this.get("game.challenges")
});

怎么能这样在上面的代码是不确定的？它如何不受任何范围限制？

我抛出了这样的调试器：

init() {
  debugger
},

如果我注销，this.get("game")它将返回期望值。

我还尝试将服务放入仍未定义的init内。我已经尝试过注销，但也未定义。

有没有办法强迫服务在继续之前解决？我尝试使用各种组件挂钩，但是它们似乎并没有改变。

Answer 1

阐述汤姆的答案：

在JS中，this是一种特殊变量。其含义取决于它是否在函数内部。

• 在函数外部，是全局上下文（在浏览器中，通常是window对象）。
• 在函数内部，它是调用该函数的对象。例如，如果您写obj.f()，那么this它将obj在f()。如果直接调用该函数，则this保持当前状态不变。

在您的代码中，JS引擎当前正在函数外部执行（正在准备调用extend，将其传递给对象）。

export default Ember.Component.extend({
  game: Ember.inject.service(),
  events: this.get("game.challenges")
});

因此，this在您的代码中引用该window对象。您可以使用计算属性（即，当访问该属性时在您的对象上调用的函数）来解决该问题：

export default Ember.Component.extend({
  game: Ember.inject.service(),
  events: Ember.computed('game.challenges', function() {
    return this.get("game.challenges");
  })
});

您可以在函数中进行所需的任何计算。请记住，结果所依赖的所有内容都必须列在其中，property()以便Ember知道何时重新计算它。

最后，对于一些常见的情况下，烬提供了一些快捷方式，例如Ember.computed.alias，Ember.computed.equal，...

Answer 2

您必须告诉 Ember 这是一个计算属性。计算属性在文档中有很好的记录 -

http://guides.emberjs.com/v2.0.0/object-model/compulated-properties/

如果您只是希望它与服务中的值相同，您可以像这样给它起别名：

game: Ember.computed.alias('game.challenges')