Setting a previously undefined but observed property in init causes it to be inaccessible via get

[ctusch]

I had a problem where Ember wasn't able to access a property on my component.js, neither via binding nor via this.get always returning undefined. Turns out it's a bad idea to observe a property which is not defined until init is called and which is assigned via = instead of this.set. See this Ember Twiddle.

This only happens in conjunction with observers. Not with computed properties that observe another property. This seems to be because observers are initialized before init is called.

I guess I understand why this is expected behavior. But there should at least be some warning in the console. It took me a whole day to isolate the behavior of this in our Ember app, to find the reason for it and with it the fix. I just found a ticket (#9395) which sounds very similar. But I'm not sure whether the assert has ever been added.

[stefanpenner]

Good chance #12491 will fix this, if you can add a test case to the PR we can confirm.

[ctusch]

Hey, sorry for the late reply. This seems fixed in 2.4.0-beta.1! I can directly assign (=) unassigned observed properties and then read them using this.get. The template also updates successfully.

The PR is closed now, I'm not sure where I should add the test:

QUnit.test('watching an undefined property then assigning it should return value', function() {
  var obj = Object.create();

  watch(obj, 'foo');
  obj.foo = 'bar';

  equal(get(obj, 'foo'), 'bar', 'should get new value');
});