Evento de "primer renderizado" del componente

Question

Hola. Estoy desarrollando un plugin para gráficos usando chart.js. Necesito mantener el modelo del gráfico dentro del componente generado para renderizar el gráfico en las cargas del lienzo trasero. Para lograrlo, decidí persistir el modelo del gráfico en un atributo HTML del componente. Este es el HTML generado del componente después de configurar el gráfico (el modelo del gráfico se almacena en el atributo "chartmodel"): ! captura de tela 2018-09-10 como 09 28 51 Mi estrategia es que, cuando...

artf · Accepted Answer

Puedes usar 'onRender' '''js view: defaultView.extend({ // ... onRender() { const chartModelSaved = this.el.getAttribute('chartmodel'); if (chartModelSaved) { this.model.set ('chartModel', JSON.parse(chartModelSaved)); this.model.set('chartType', this.model.get('chartModel').type) } else { this.model.set('chartModel', JSON.parse(ChartDefaultData)); } } }) ```

gabrigcl · Answer

¡Gracias, este método funciona! Sin embargo, tengo que almacenar el modelo del gráfico dentro del HTML del componente para que la plantilla generada muestre el gráfico fuera del editor grapesjs. No puedo persistir nada dentro de un atributo html personalizado del componente, como quiero: '''html <canvas chartmodel="{chartType: donut}"> ``` ¿Qué solución tengo para esta necesidad?

artf · Answer

@gabrigcl no entiendo cuál es el problema ahora... no puedo persistir nada dentro de un atributo html personalizado del componente como quiero Pero es exactamente lo que has mostrado en tu publicación anterior, intenta explicar mejor qué necesitas y qué no puedes conseguir, una demo en directo sería mejor.

Evento de "primer renderizado" del componente

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Cómo almacenar los atributos "data-" en la etiqueta html del componente

No se puede obtener contenido de un bloque de enlace

No se puede obtener contenido de un bloque de enlace

Añadir html personalizado dentro de Canvas

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins