Ember“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将是f() obj 。 如果直接调用该函数， 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提供了一些快捷方式 ，例如Ember.computed.alias ， Ember.computed.equal ，...

Answer 2

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

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

如果您只是希望它与服务具有相同的值，您可以将其替换为：

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