QUESTION: How to track the updates of components down the tree?

Question

Hi, @artf. I have a few questions regarding component lifecycle hooks.

In my application, I want to track the updates to all the children of a component and their children, and so on. How should I do it?
Updates on immediate children are tracked by the model.updated() hook but I need to track the updates to a component (let's call this a super child) which is a nested child of some other component (let's call this super parent). In between the super parent and the super child, there can be any number of components. How can I track these updates? e.g. If I add a component to the super child, I want to do some stuff in the super parent.

Also, I can't track the changes on a global level. I want to do it at the component level.

<hr/> To add more context to my problem, this is what I am trying to do:<br/> I have a custom component inside which the user can have a grid-like structure based on the number of columns specified in the traits. A grid has multiple custom cell components that are similar. <br/> Each grid cell is editable and if the user changes one grid cell (adds or removes components), other grid cells get the update.<br/> To keep a track of the changes I am making use of an attribute on the custom grid component. The attribute is like a blueprint of the cells in the grid (it represents the cell structure and its the cell component which is updated latest)

Answers (1)

artf• December 14, 20200 reactions

I'd create a specific listener on the parent

// parent component
...
init() {
 this.on('cell-changed', this.doStuff)
}

then I'd trigger that event from the child

updated() {
 const parent = this.closestType('grid-type');
 parent && parent.trigger('cell-changed', { keys: 'values' })
}

QUESTION: How to track the updates of components down the tree?

Question

Answers (1)

Related Questions and Answers

[Question] How to work with Custom Components

Few Questions

Question: how to observe children changes in component

How to enable functionality only for specific image component, not all

Paid Plugins That Match This Issue

Browse Plugin Categories