EmberJS notifyPropertyChange not making it to observer?

Question

I have a component which has, inside it, a list of child components (being drawn with a yield inside the parent component):

parent-component
  for item in items
    child-component item=item childProperty=parentProperty

Inside child-component, I have an observer on "childProperty", which correctly fires any time parentProperty changes. The problem is that I'd like to trigger that observer in a time when the property hasn't actually changed.

to do this, in my parent-component, I have:

this.notifyPropertyChange('parentProperty')

For some reason, this isn't making it to the child component. Here's a JS bin showing:

http://emberjs.jsbin.com/caxedatogazo/1/edit

While I'm happy to talk through my use-case more, I'm more interested in whether the JS bin should work, and if not, why..

Thanks so much for any help!

Answer 1

When you call notifyPropertyChange on the controller, only observers registered within the controller are notified of the property change.

In your case, the observer is within the component controller and not the parent controller from where the notifyPropertyChange is called.

There is a hacky way to ensure that the component controller is notified of the property change. This can be done by adding the following method to the Component.

didInsertElement: function() {
  var controller = this.get('targetObject'); 
  controller.addObserver('foo', this, this.onDataChange);
},

What we are doing is, getting the parent controller, registering an observer for foo with the parent controller.

Here is the emberjs fiddle for the same: http://emberjs.jsbin.com/rajojufibesa/1/edit

Hope this helps!