Actualizar vista de componentes al cambiar la propiedad
para actualizar el HTML tienes que cambiar 'toHTML' en el modelo '''js modelo: { ... toHTML() { const tagName = this.get('tagName'); precio const = esto.obtener('precioDefault'); return '<${tagName}>${price}</{tagName}>'; } } ```
Lee la respuesta completa abajo ↓Pregunta
Hola a todos, Estoy intentando crear un componente que actualice su vista en función del valor de una propiedad '''javascript editor. DomComponents.addType("price-value-type", { isComponent: el => { if (el.tagName == "div" && el.hasAttribute("precio-valor")) { return { type: "price-value-type" }; } }, modelo: { defaults: Object.assign({}, defaultProperties, { defaultPrecio: 0, nombre: "Price", Clases: ["Precio"], components: model => { return '${model.get("defaultPrice")}'} }) }, extendView: 'default', extendFnView: ['render'], Vista: { init() { console.log(this.render); this.listenTo(this.model, 'change:defaultPrice', this.render); }, render() { this.el.innerHTML = this.model.get("defaultPrice"); // } } });
Mi enfoque está basado en el #1227 y en [la documentación](https://grapesjs.com/docs/modules/Components.html#update-component-type). En mi caso de uso no necesito el rasgo, puedo simplemente actualizar la propiedad programáticamente. Pero esto no funciona y no muestra ningún componente en el lienzo aunque estén en el gestor de capas, como podemos ver [aquí](https://prnt.sc/qx9j12)(se muestran correctamente con la función de renderizado comentada), ¿quizá me estoy perdiendo algo?
Respuestas (3)
para actualizar el HTML tienes que cambiar 'toHTML' en el modelo '''js modelo: { ... toHTML() { const tagName = this.get('tagName'); precio const = esto.obtener('precioDefault'); return '<${tagName}>${price}</{tagName}>'; } }
¿Has probado algo así? '''js Vista: { init() { this.listenTo(this.model, 'change:defaultPrice', this.render); }, onRender() { this.el.innerHTML = this.model.get("defaultPrice"); } }
Lo probaré pasado mañana. ¡Gracias por vuestras respuestas rápidas!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2839
[Pregunta] Añadí un componente llamado plantilla en los bloques, pero cuando intento arrastrar otros componentes dentro de ese componente plantilla, se arrastra, pero tras guardarlo elimina todos los componentes que hay dentro. ¿Cómo evitar esto?
Este es el código del componente de plantilla: '''js exportar default { init(editor) { editor. DomComponents.addType('myTemplate', { isComp...
Issue #2614
[PREGUNTA] Actualización de vista recursiva de un componente personalizado
Hola, He definido un tipo personalizado como: '''javascript editor. DomComponents.addType('customType', { modelo: { Predeterminados: { tipo...
Issue #3174
Crear un nuevo tipo de componente no hereda las funciones de su tipo padre
Hola, estoy intentando crear un nuevo rasgo común compartido entre todos los componentes creando el siguiente plugin en otro archivo de plu...
Issue #2696
[PREGUNTA]: ¿Cómo puedo crear bloque con imagen de fondo con un comportamiento similar a una "imagen" incorporada?
Hola, estoy intentando crear un bloque con imagen de fondo (similar a Grapedrop Image Box). He añadido un componente nuevo así: '''javascri...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.