在父对象中设置对象属性后，Ember.js延迟将对象属性传递给子组件

Question

I'm working in Ember 3.1.4.

In keeping with the DDAU pattern, I have a set setProperty action in my controller, which simply accepts the property name and the value to set it to, and then does so.

I then pass the action into my component, and I can call it to set a property at the controller level, and then pass the property back down into the component.

When setting a property to a string, it works as expected and if I get the property immediately after calling the setProperty action, it returns the new value (As when setting simpleProp below).

Strangely, when I use setProperty to set a property to an empty object, or to set a child property on an object, the property returns undefined if I get it immediately after calling the action, but returns the new value if I use a setTimeout of 1 millisecond.

What causes this, and is there a way I can prevent this from happening?

Setting a property to an empty object

Controller

 setProperty: function(property, value) { this.set(property, value); }, 

my-component.js

 didInsertElement() { this.setProperty('parentObject', {}); console.log(this.get('parentObject')); // undefined setTimeout(() => { console.log(this.get('parentObject')); // {} }, 1); this.set('simpleProp', 'foo'); console.log(this.get('simpleProp')); // 'foo' } 

Template

{{my-component simpleProp=simpleProp parentObject=parentObject setProperty=(action "setProperty")}}

Setting a child property on an existing object

Controller

 init() { this._super(...arguments); this.parentObject = {}; } setProperty: function(property, value) { this.set(property, value); }, 

my-component.js

 didInsertElement() { this.setProperty('parentObject.childProp', 'bar'); console.log(this.get('childProp')); // undefined setTimeout(() => { console.log(this.get('childProp')); // 'bar' }, 1); this.set('simpleProp', 'foo'); console.log(this.get('simpleProp')); // 'foo' } 

Template

{{my-component simpleProp=simpleProp childProp=parentObject.childProp  setProperty=(action "setProperty")}}

Answer 1

What you are trying to do is against Ember's design pattern because Controllers are considered singletons. The guides state that:

Controllers are singletons so we should avoid keeping state that does not derive from either the Model or Query Parameters since these would persist in between activations such as when a user leaves the Route and then re-enters it.

Because of Ember's bi-directional data flow, you should simply be able to this.set() in the component and completely get rid of this.setProperty() in the controller.