Issue #990💬 RespondidoAbierto el 1 de abril de 2018por anand-gopinathReacciones 0

¿Cómo escuchar un evento para actualizar el estilo de un componente personalizado?

Respuesta rápidapor artf

Para las propiedades del componente usa 'this.listenTo(this.model, "change:prop-name" ...'Haciendo '... attributes.align = "left"' Component no ve tus cambios, usa en su lugar 'this.model.components().at(0).addAttributes({ align: 'left' })', no necesitas actualizar ni renderizar el elemento.

Lee la respuesta completa abajo ↓

Pregunta

@artf @arthuralmeidap @nojacko Tengo un componente personalizado como este y el código se ve como https://jsfiddle.net/nganand/n97g7g43/.

! bbb

  1. ¿Cómo escuchar un evento cuando la propiedad de un componente personalizado cambió (por ejemplo, al estilizar el relleno/margen)? Como init() { this.listenTo(this.model, "component:styleUpdate:text-align", this.handleChange) }
  2. Quiero alinear el botón a la izquierda, seleccionando no padre. En su lugar, seleccionando al antepasado. Entonces, ¿cómo cambiar la vista de hijos del componente personalizado cuando el padre está seleccionado? Hice algo así como this.model.attributes.components.models[0].attributes.attributes.align = "izquierda" this.el.getElementsByClassName("mjmlButton")[0].align = "left"; this.render() ¿Pero no funcionó?

Respuestas (2)

artf4 de abril de 2018
  1. Para las propiedades del componente usa 'this.listenTo(this.model, "change:prop-name" ...'
  2. Haciendo '... attributes.align = "left"' Component no ve tus cambios, usa en su lugar 'this.model.components().at(0).addAttributes({ align: 'left' })', no necesitas actualizar ni renderizar el elemento.
lock[bot]17 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.