Issue #3052💬 RespondidoAbierto el 30 de septiembre de 2020por MudassarSandhuReacciones 0

Ocultar/mostrar rasgos y cambiar sus valores dinámicamente

Respuesta rápidapor artf

Has llamado al rasgo 'nombre: 'select-type', pero estás escuchando 'change:selectType', así que arréglalo cambiando el oyente en 'change:select-type'No te fíes del valor de rasgo 'this.getTrait('select-type').props().value' sino del propio componente 'this.get('select-type')' Actualmente no puedes actualizar atributos...

Lee la respuesta completa abajo ↓

Pregunta

He ampliado el componente de enlace y añadido nuevos rasgos como href. Para mostrar o ocultar el rasgo, seguí este #https://github.com/artf/grapesjs/issues/1460. Pero, ¿cómo mostrar esos rasgos de ocultación de nuevo basándose en otro cambio de valor de rasgo? Ahora mismo lo que he hecho es

'Editor. DomComponents.addType('link', {
    model: dModel.extend({
        defaults: Object.assign({}, dModel.prototype.defaults, {
          Rasgos: [
            {
              Nombre: 'Nombre-Camino',
              Tipo: 'texto',
              etiqueta: 'Texto para mostrar',
              cambioProp: 1,
            },
            {
               tipo: 'set-path', // Tipo del rasgo
               etiqueta: 'Href', // La etiqueta que verás en Configuración
               nombre: 'path', // El nombre del atributo/propiedad a usar en el componente
               Opciones: [],
               cambioProp: 1,
             },
             {
               tipo: 'texto', // Tipo del rasgo
               etiqueta: 'Href', // La etiqueta que verás en Configuración
               nombre: 'path-url', // El nombre del atributo/propiedad a usar en el componente
               cambioProp: 1,
             },
            {
              tipo: 'select',
              etiqueta: 'Step',
              Nombre: 'Select-Type',
              opciones: inputTypes,
              cambioProp: 1,
            }
          ],
        }),
        init() {
          depurador;
          Además, el oyente cambia de 'change:attributes:*' a 'change:*'
          this.listenTo(this, 'change:selectType', this.doStuff);
        },
        updated(property, value, prevValue) {
          console.log('Gancho local: model.updated', 'property', property, 'value', value, 'prevValue', prevValue);
        },
        doStuff() {
          switch (this.getTrait('select-type').props().value) {
            Caso 'non':
               this.getTrait('path-url').props().attributes.style = 'display: block';
               this.getTrait('path').props().attributes.style = 'display: ninguno';
              pausa;
            Caso 'escalón':
               this.getTrait('path-url').props().attributes.style = 'display: none';
               this.getTrait('path').props().attributes.style = 'display: block';
              pausa;
        },
      },
      {
        isComponent: function (el) {
          if (el.tagName == 'A' || el.tagName == 'enlace') {
            return {type: 'link'};
          }
        },
      }),
    Ver: dView
  });`

Pero no refleja los cambios en la configuración de componentes. ¿Podemos cambiar el estilo de rasgo, como ocultar/mostrar dinámicamente? ¿Podemos asignar un valor de rasgo de tipo select al valor del rasgo de nombre de ruta o necesito implementar tipos personalizados para eso?

Respuestas (2)

artf10 de octubre de 2020
  1. Has llamado al rasgo 'nombre: 'select-type', pero estás escuchando 'change:selectType', así que arréglalo cambiando el oyente en 'change:select-type'
  2. No te fíes del valor de rasgo 'this.getTrait('select-type').props().value' sino del propio componente 'this.get('select-type')'
  3. Actualmente no puedes actualizar atributos de rasgos de esa manera, pero puedes hacer esto como 'getTrait('ID').view.el.style.display = 'ninguno';'
chaegumi12 de enero de 2023

getTrait('ID').view no está definido.

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 →

Explorar categorías de plugins

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