didReceiveAttrs not always called

Learning Team
1

Hi!

I have a controller with a store (a js object) I pass to my component.

The store looks like that:

  init() {
    this._super(...arguments);
    

    this.pageStore = {
      section: {
      	style: 'padding: 10px 10px'
    	}
    };
  },

I’m using DDAU (Data Down Action Up), I have an action in my controller which modify pageStore.section.style and I have a component into which I give pageStore.section as attribute.

When I modify pageStore.section.style, I want to get the new value in my component in didReceiveAttrs.

The thing is, the only way to achieve that is by using this.notifyPropertyChange('pageStore');, but this re-redender everything.

My question is, why it doesn’t work if I do this.notifyPropertyChange('pageStore.section'); ?

Here a twiddle: Ember Twiddle

2

I need to double check but my understanding is that bindings in templates only trigger lifecycle hooks when the reference changes. If you are just wanting to bind the value to the component template, that works without the hook:

components/section-row.js

  style: Ember.computed('section.style', function() {
    return Ember.String.htmlSafe(this.get('section.style'));
  }),

templates/components/section-row.hbs

<h2 style="{{style}}">Section Row</h2>