Issue #1080💬 RespondidoAbierto el 2 de mayo de 2018por francesca-cicileoReacciones 0

Cambiar el atributo del componente del script

Respuesta rápidapor artf

Puedes acceder a propiedades anidadas como esta 'var customAttribute = '{[ attributes.customAttribute ]}';' dentro del 'script'. Deberías usar las propiedades del modelo: '''js ... CustomAttribute: '', script: function() { ... ``` y luego en tu script 'var customAttribute = '{[ customProp ]}';' Una cosa más, no puedes...

Lee la respuesta completa abajo ↓

Pregunta

Estoy ampliando el componente de 'texto' añadiendo un nuevo atributo y un script. Cuando un usuario escribe un determinado carácter en el componente de texto, quiero que el script cambie el atributo en el modelo del componente, pero no estoy seguro de cómo hacerlo. Esta es mi configuración para modificar el componente de texto:

var originalTextComp = domc.getType('text');
domc.addType('text', {
    model: originalTextComp.model.extend({
        defaults: Object.assign({}, originalTextComp.model.prototype.defaults, {
          atributos: {
            customAttribute: false,
          },
          script: function() {
            var customAttribute = '{[ attributes.customAttribute ]}';
            var show = function() {
              if (customAttribute) {
                console.log('programa');
              }
            };
            var hide = function() {
              if (customAttribute) {
                console.log('esconderse');
              }
            };

var checkEventAndRun = function(e) {
              if (e.which == 219 && !customAttribute) {
                customAttribute = true;
                show();
              } si no (e.which == 221 && customAttribute) {
                esconder();
                customAttribute = false;
              }
            };

this.addEventListener('keyup', comprobaEventoAndRun);
            this.addEventListener('blur', hide);
            this.addEventListener('focus', show);
          },
        }),
    }),
    ver: originalTextComp.view
  });

Tengo dos problemas: el customAttribute no se carga correctamente en el script, y no sé cómo hacer que el valor del customAttribute en el script cambie el valor del custom attribute en el modelo. Tengo un oyente ''editor.on(''component:update:attributes', model => {});''' que no se llama, incluso cuando veo 'hide' y 'show' en la consola (lo que indica que el customAttribute sí se ha cambiado en el script). El oyente solo se llama cuando coloco el componente en el lienzo (así que funciona). ¿Alguna idea?

Respuestas (2)

artf4 de mayo de 2018

Puedes acceder a propiedades anidadas como esta 'var customAttribute = '{[ attributes.customAttribute ]}';' dentro del 'script'. Deberías usar las propiedades del modelo: '''js ... CustomAttribute: '', script: function() { ...

y luego en tu script 'var customAttribute = '{[ customProp ]}';'
Una cosa más, no puedes actualizar la variable dentro del 'script' y esperar que propague ese cambio, el 'script' funciona en un contexto totalmente separado #358
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.