[QUESTION] Update component view on property change

Hi everyone, I’m trying to create a component that will update it’s view based on a property value

editor.DomComponents.addType("price-value-type", {
            isComponent: el => {
              if (el.tagName == "div" && el.hasAttribute("price-value")) {
                return { type: "price-value-type" };
              }
            },
            model: {
              defaults: Object.assign({}, defaultProperties, {
                defaultPrice: 0,
                name: "Price",
                classes: ["price"],
                components: model => {
                  return `${model.get("defaultPrice")}`}
              })
            },
            extendView: 'default',
            extendFnView: ['render'],
            view: {
              init() {
                console.log(this.render);
                this.listenTo(this.model, 'change:defaultPrice', this.render);
              },
              // render() {
              //   this.el.innerHTML = this.model.get("defaultPrice");
              // }
            }
          });

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?

[artf]

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}>`;
	}
}

[rjrodriguezalvarez97]

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