Issue #895💬 RespondidoAbierto el 23 de febrero de 2018por alvimReacciones 0

El script de actualización no actualiza correctamente el script de componentes después de cargar automáticamente un componente desde html en localStorage

Respuesta rápidapor artf

'gjs-html' contiene el HTML final, el HTML que tus usuarios verán, así que es correcto que veas el script "compilado". Para una edición correcta, tienes que confiar en 'gjs-components', que básicamente es una representación en JSON de la plantilla y contiene toda la información sobre tus componentes

Lee la respuesta completa abajo ↓

Pregunta

Estoy usando GrapesJS v0.14.5 en una copia local. SO: Ubuntu 16.04 LTS Navegador: Chrome Versión 64.0.3282.140 (Versión oficial) (64 bits) Creo que no puedo reproducirlo de la demo

Tengo un componente con el guion actual: '''javascript script: función () { console.log('¡Secuencia de script!', '{[ marca de tiempo ]}'); var timestamp = '{[ timestamp ]}'; var comp = xGrapes.comp;

var vm = new Vue({ el: '#app-contenedor-${timestamp}', componentes: { Comp: Comp }, data: función () { return { msg: "{[ mensaje ]}" } }, plantilla: '<div><h1>{{msg}}¡</h1><p>Genial!</p><comp message="{[ anotherMessage ]}"></comp></div>' }); }

(La parte de la variable "comp" es de una funcionalidad de [plugin](https://github.com/alvimm/grapesjs-expose) que estoy desarrollando actualmente, pero creo que puedes ignorarla)

Como puedes ver, estoy renderizando un componente de Vue. Este componente tiene algunos datos vinculados mediante rasgos. Cuando añado el componente en canvas y cambio sus rasgos, el script se actualiza inmediatamente y vuelvo a cargar el componente con el nuevo mensaje, ya que uso el método 'updateScript', como puedes ver aquí:

init() {

this.insertAppContainer()

this.listenTo(this.model, 'change:message change:anotherMessage', this.onChangeProps); editor.on('load', this.onChangeProps.bind(this)); },

onChangeProps() { this.insertAppContainer(); this.updateScript(); }

Hasta ahora todo ha funcionado como se esperaba. :+1: 
Si actualizo la página, mi lienzo se vuelve a cargar con contenido HTML almacenado en el elemento localStorage 'gjs-html', ya que tengo 'storageManager.autoload = true'.

Ahora, si actualizo las propiedades de mis rasgos con un nuevo valor, los mensajes no se actualizan en absoluto (siguen mostrando el último valor guardado antes de la actualización) y he notado por qué:
Antes de la actualización de la página, si 'console.log' mi 'model.attributes.script', este es el resultado:
! [captura de pantalla del 23-02-2018 del 22-15-2018](https://user-images.githubusercontent.com/11471014/36610309-9e01b400-18ae-11e8-9d15-87d2a3dec2e1.png)
Tras la actualización de la página, este es el resultado:
! [captura de pantalla del 23-02-25-2018](https://user-images.githubusercontent.com/11471014/36610365-c9fd6234-18ae-11e8-9400-57ebf16b3e71.png)

La función script se almacena en 'gjs-html' como una cadena con las variables codificadas en fija. Después de la recarga no tiene la notación como '{[ mensaje ]}', sino el último valor guardado.

Espero haber sido claro.
¡Gracias! :sonríe: 

Respuestas (2)

artf1 de marzo de 2018

'gjs-html' contiene el HTML final, el HTML que tus usuarios verán, así que es correcto que veas el script "compilado". Para una edición correcta, tienes que confiar en 'gjs-components', que básicamente es una representación en JSON de la plantilla y contiene toda la información sobre tus componentes

lock[bot]18 de septiembre de 2019

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

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.