Issue #2127💬 RespondidoAbierto el 10 de julio de 2019por zyxnowellReacciones 0

Cómo actualizar la proposición de contenido a partir del evento de rasgos

Respuesta rápidapor artf

Primero, mueve todos los props del bloque al componente para que tenga algo así: '''js blockManager.add('bar-chart-block', { ... Contenido: { Type: 'Canvas-options' } })

Lee la respuesta completa abajo ↓

Pregunta

Hola, quiero actualizar la propiedad de contenido basándome en los cambios del rasgo

Tengo este componente añadido

blockManager.add('bar-chart-block', {
        Etiqueta: '<div>
                  <img src="dist/img/bar-chart.png" height="60px" width="60px">
                  <div class="mi-etiqueta-bloque">Gráfico de barras</div>
                ',</div>
        categoría: 'Listas',
        Atributos: {},
        Contenido: {
          Tipo: 'Opciones de lienzo',
          Contenido: '<canvas></canvas>',
          TipoGráfico: 'barra',
          script: función () {
            var ctx = this.children[0];

new Chart(ctx, {
                tipo: '{[ chartType ]}',
                
});
          },
          estilo: {
            ancho:'400px'
          }
          
}
      });

y observo que tengo una propiedad personalizada 'chartType', que es la que tendría que actualizar.

Aquí está el rasgo que creé:

var domComps = editor. DomComponents;
      var dType = domComps.getType('default');
      var dModel = dType.model;
      var dView = dType.view;

domComps.addType('canvas-options', {
          model: dModel.extend({
            defaults: Object.assign({}, dModel.prototype.defaults, {
              Rasgos: [
                {
                  Tipo: 'texto',
                  etiqueta: 'Tipo de lista',
                  nombre: 'chartType',
                  cambioProp: 1,
                },
                {
                  Tipo: 'color',
                  etiqueta: 'Color de Icono',
                  cambioProp: 1,
                  nombre: 'iconColor'
                }
              ],
            }),
            init() {
              this.listenTo(this, 'change:chartType', this.doStuff);
            },
            updated(property, value, prevValue) {
              console.log('Gancho local: model.updated', 'property', property, 'value', value, 'prevValue', prevValue);
            },
            doStuff() {
              console.log("adasd")
            }
          },
          {
            isComponent: function(el) {
              if(el.tagName == 'canvas-options'){
                return {type: 'canvas-options'};
              }
            },

}),
          Ver: dView
      });

Lo que quiero hacer es que cada vez que se llame el evento 'updated' o 'doStuff' en las 'opciones de canvas', actualice el prop 'chartType' en el contenido del componente.

¿Es esto posible? Gracias a quien pueda ayudarme.

Respuestas (1)

artf14 de julio de 2019

Primero, mueve todos los props del bloque al componente para que tenga algo así: '''js blockManager.add('bar-chart-block', { ... Contenido: { Type: 'Canvas-options' } })

De lo contrario, puedes enfrentarte a comportamientos inesperados

> Lo que quiero hacer es que cada vez que se llame el evento actualizado o doStuff en las opciones de canvas, se actualice el gráfico de prop type en el contenido del componente.

Para actualizar el script en el lienzo deberías volver a renderizar la vista
'''js
doStuff() {
 vista const = esto.getView(); 
 ver & & ver.render();
}

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.