Ember“this”在组件中未定义

Question

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

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

import Ember from 'ember';

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

如何this在上面的代码中是未定义的？怎么不绑定任何作用域？

我已经投入了这样的调试器：

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 对象。您可以使用 computed property 来解决此问题，即在访问属性时在您的对象上调用的函数：

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

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

最后，对于一些常见的情况，ember 提供了一些shortcuts，比如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')