Issue #2404💬 AnsweredOpened November 13, 2019by scott-coates3 reactions

How to observe children changes in component

Quick answerby pouyamiralayi1

Is there an easy way to subscribe/listen to changes in the components/children of my custom component type? @scottccoates you can subscribe this way: cheers!

Read full answer below ↓

Question

Is there an easy way to subscribe/listen to changes in the components/children of my custom component type? Perhaps an event I can subscribe to? Something like change:content?

I want to add traits to children of my container component. If the children leave the container, the traits should disappear.

I can think of 1 workaround. Something like:

// in the view
this.el.bind("DOMSubtreeModified",function(){
  alert('changed');
});

Answers (3)

pouyamiralayiNovember 13, 2019

Is there an easy way to subscribe/listen to changes in the components/children of my custom component type?

@scottccoates you can subscribe this way:

init(){ // inside your model
    this.listenTo(this.components().at(0),'change:prop-name', handler)
}

cheers!

scott-coatesNovember 14, 2019

@pouyamiralayi thanks. I need to watch for children leaving/entering my component. I'm not sure what you supplied will help or am I missing something?

pouyamiralayiNovember 14, 2019

@scottccoates this might help:

 editor.on('component:add', model => console.log(model.parent().get('custom-name')))
 editor.on('component:remove', model => console.log(model.parent().get('custom-name')))

cheers!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.