Evento de "primer renderizado" del componente
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',...
Lee la respuesta completa abajo ↓Pregunta
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 el componente se renderiza por primera vez, si hay un modelo gráfico (dentro del atributo "chartmodel" del componente), entonces el gráfico se renderiza analizando la cadena JSON de este atributo. Si no hay un atributo "chartmodel" (cuando el usuario crea el componente), el chart se renderiza usando un modelo predeterminado del núcleo del componente:
'''javascript view: defaultView.extend({ init() { 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)); } //...
Sin embargo, cuando se llama al método init(), descubrí que el componente no se renderiza completamente y el atributo "chartmodel" aún no está disponible. Así que tengo que hacer estas operaciones para renderizar el gráfico de un modelo guardado en un atributo del componente **solo cuando el componente se renderiza completamente por primera vez**. Mi pregunta es, ¿hay algún evento o gancho que solo se pueda escuchar cuando el componente está completamente renderizado la primera vez que se carga en el lienzo?
Respuestas (3)
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)); } } })
¡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?
@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.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1459
[PREGUNTA] Cómo almacenar los atributos "data-" en la etiqueta html del componente
Hola, estoy desarrollando un plugin para gráficos usando chart.js. Para que la plantilla generada renderice el gráfico desde un modelo de d...
Issue #2014
[BUG] - No se puede obtener contenido de un bloque de enlace
Hola a todos, Estoy usando la versión 0.14.52 de grapesjs. Estoy teniendo el siguiente problema: Cuando dejo un bloque de enlace dentro del...
Issue #2013
[BUG] - No se puede obtener contenido de un bloque de enlace
Hola a todos, Estoy usando la versión 0.14.52 de grapesjs. Estoy teniendo el siguiente problema: Cuando dejo un bloque de enlace dentro del...
Issue #1888
[Pregunta] Añadir html personalizado dentro de Canvas
Hola, Estoy usando uvas para exportar un json personalizado con toda la información que necesito, en lugar de HTML y CSS. Para hacer eso, e...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.