How to listen an event for custom component's style update?
For component's properties use this.listenTo(this.model, "change:prop-name" ...By doing ...attributes.align = "left" Component doesn't see your changes, use instead this.model.components().at(0).addAttributes({ align: 'left' }), you don't need to update/render the element.
Read full answer below ↓Question
@artf @arthuralmeidap @nojacko I have a custom component like, this and i the code looks like https://jsfiddle.net/nganand/n97g7g43/ . How to listen to an event when custom component's property changed (Ex, when styling padding/margin)? like init() { this.listenTo(this.model, "component:styleUpdate:text-align", this.handleChange) }I wish align the button to left, by selecting not parent. Instead by selecting the ancestor. So How to change the custom component's children view when parent selected ? I did something like this.model.attributes.components.models[0].attributes.attributes.align = "l...
Answers (2)
- For component's properties use
this.listenTo(this.model, "change:prop-name" ... - By doing
...attributes.align = "left"Component doesn't see your changes, use insteadthis.model.components().at(0).addAttributes({ align: 'left' }), you don't need to update/render the element.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #978
Custom component type's children are not editable, selectable or highlightable
@artf I'm creating a custom component of Default type and the code looks like Even I refereed #260 and implemented as you suggested. Here,...
Issue #362
How to create custom link components that prompts users to type link/choose link similar to Images Component Modal
Image Components have logic to call Modal and prompt user's interaction for options/configuration of image url. Would like to do similar to...
Issue #408
How to update toolbar of component?
Hi Artf, i was added new command to editable component, update style work well but i don't know how to update this toolbar after component...
Issue #979
Not able to align the custom component
@artf I created my custom component tyep and inserted vai BlockManager and if I'm applying the style propeties to that, is not working.
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.