Issue #1414💬 RespondidoAbierto el 10 de septiembre de 2018por gabrigclReacciones 0

Evento de "primer renderizado" del componente

Respuesta rápidapor artf

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)

artf11 de septiembre de 2018

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

gabrigcl14 de septiembre de 2018

¡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?
artf15 de septiembre de 2018

@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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.