Ember”;这个“;组件中未定义

Ember "this" undefined in component

本文关键字：未定义 组件 这个 Ember      更新时间：2023-09-26

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

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

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中，但仍然没有定义。我试过注销这个，那个也没有定义。

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

详述汤姆的答案：

在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…

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

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

如果你只是想让它与服务中的值相同，你可以这样别名：

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

相关文章：