Hi everyone, I'm trying to create a component that will update it's view based on a property value My approach is bassed on #1227 and on the docs In my use case I don't need the trait, I can just update the property programmatically. But this won't work and will not display any component on the canvas even though they are on the layer manager as we can see here(they show properly with the render function commented) maybe i'm missing something?

✓ Solved: Update component view on property change

Answers (3)

👍 Most helpfulartf• February 4, 2020

to update the HTML you have to change toHTML in the model

model: {
	...
	toHTML() {
		const tagName = this.get('tagName');
		const price = this.get('defaultPrice');
		return `<${tagName}>${price}</{tagName}>`;
	}
}

artf• February 4, 2020

Did you try something like this?

view: {
	init() {
		this.listenTo(this.model, 'change:defaultPrice', this.render);
	},
	onRender() {
		this.el.innerHTML = this.model.get("defaultPrice");
	}
}

rjrodriguezalvarez97• February 4, 2020

I’ll give it a try the day after tomorrow. Thanks for your quick replies!

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 →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Update component view on property change

Question

Answers (3)

Related Questions and Answers

[QUESTION] Recursive view update of custom component

[QUESTION] Problem with custom component type and table cell

[QUESTION] Reinit model's components function

Component Value is not changing

Paid Plugins That Match This Issue

Browse Plugin Categories