Updating bound properties in a component's init hook does not notify parent view

[tehmaestro]

If I change a bound property, the observer is not triggered for the parentView.

  // app/controllers/my-controller.js
   propertyChanged: function() {
      //this is not triggered
     console.log('changed');
   }.observes('property')

    // app/templates/my-controller.hbs
    {{my-component property=property}}

    // app/components/my-component.js
   doSomething: function() {
     this.set('property', false);
   }.on('init')

Here, the bound property in the controller is not being updated when the component updates it. I tried to use other component hooks, and it only worked in didInsertElement

Here's some examples
Ember 1.12 outputs "changed" : http://emberjs.jsbin.com/bimerijuko/1/edit?html,js,console,output
Ember 1.13 does not : http://emberjs.jsbin.com/qoxumi/1/edit?html,js,console,output

[jcope2013]

seems related #11637

[pixelhandler]

@tehmaestro just a guess but maybe this has something to do with the plan to move toward -> data (bindings) down, actions up methodology. So the setting of the component value for theCount doesn't mutate the count value as it did in 1.12. I'm suspicious that example is not a good use of observers in 1.12 the count value is magically observed as its declared in the template but likely evaluates to undefined as it's not a property of the controller, at least I don't see it in the prototype of the controller as a property.

[pixelhandler]

@tehmaestro perhaps this would be a better implementation example for the data (bindings) down and actions up methodology: http://emberjs.jsbin.com/paqepi/3/edit?html,js,console,output

I get that it works in 1.12 and not in 1.13 I have a lot of that happening to me as well. We're slowly updating our code following the deprecation suggestions (we could not make the update to 1.13.x for our apps).

Perhaps it's worth updating your implementation that depended on the observer then update to 1.13

[bugant]

I'm experiencing the same issue. I have simple re-pro for the bug here: https://ember-twiddle.com/3273626ee3e8850a9494?openFiles=my-component.component.js%2Capplication.template.hbs

As you can see it works for 1.12 and then from 1.13 on the init will not keep controller and component property synched.

As a workaround, you can force the bounded property init on your init function:

this.set('boundProp', 'foo');
this.attrs.boundProp.update(this.get('boundProp'));

[pixelhandler]

@tehmaestro @bugant Since 1.13 was supported for a long time, much longer than anticipated; and since we now have an LTS (2.4.5) release… It's very unlikely any patches will be added to 1.13.x

That said there are a couple workarounds to this issue, so closing for now. If you have any difficultly with alternative implementations perhaps reach out in the embercommunity.slack.com #-help channel.

[dhawalbhanushali]

Even I am facing the same issue. Any update on this?

[Serabe]

@dhawalbhanushali, please take a look at this comment: #13823 (comment)

[tehmaestro]

Hi, so what is the best workaround for this. Cause, as I understand it, init doesn't work, didReceiveAttrs doesn't work, and it would fire too often anyway, and didInsertElement is not allowed to set properties.

In which hook can I update a bound property inside a component? Thanks.