I'm trying to make a progress bar that gets updated as more challenges are pleted. However, the ponent cannot access the property because this is undefined.

I have injected a service and I'm trying to create a puted property from a property of the service. However, this is always undefined unless in debugging.

import Ember from 'ember';

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

How can this be undefined in the above code? How is it not bound to any scope?

I've thrown in a debugger like this:

init() {
  debugger
},

If I log out this.get("game") it returns the expected value.

I've also tried putting in the service inside of the init, still undefined. I've tried logging out this and that is undefined as well.

Is there a way to force the service to resolve before moving on? I have tried using various ponent hooks but they don't seem to have changed things.

I'm trying to make a progress bar that gets updated as more challenges are pleted. However, the ponent cannot access the property because this is undefined.

I have injected a service and I'm trying to create a puted property from a property of the service. However, this is always undefined unless in debugging.

import Ember from 'ember';

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

How can this be undefined in the above code? How is it not bound to any scope?

I've thrown in a debugger like this:

init() {
  debugger
},

If I log out this.get("game") it returns the expected value.

I've also tried putting in the service inside of the init, still undefined. I've tried logging out this and that is undefined as well.

Is there a way to force the service to resolve before moving on? I have tried using various ponent hooks but they don't seem to have changed things.

• javascript
• ember.js

• Possible duplicate of babel is exporting "this" as undefined in ember puted property – Patsy Issa Commented Nov 9, 2015 at 9:05

2 Answers 2

Elaborating on Tom's answer:

In JS, this is kind of a special variable. Its meaning depends on whether it is inside a function or not.

• Outside a function, it is the global context (in a browser, that's usually the window object).
• Inside a function, it is the object the function is called on. Eg if you write obj.f(), then this will be obj in f(). If calling the function directly, this remains whatever it currently is.

In your code, the JS engine is currently executing outside a function (it is preparing to call extend, passing it an object).

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

Therefore, this in your code refers to the window object. You fix that using a puted property, that is, a function that gets invoked on your object when the property is accessed:

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

You may do whatever putation you need in the function. Just remember than anything the result depends on must be listed inside property() so Ember knows when to repute it.

Lastly, for some mon cases, ember provides some shortcuts, such as Ember.puted.alias, Ember.puted.equal, …

You have to tell Ember that this is a puted property. Computed properties are very well documented in the docs -

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

If you just want it to be the same value from the service, you could alias it like so:

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