Cómo actualizar la proposición de contenido a partir del evento de rasgos
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)
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.
Issue #3019
[PREGUNTA] - Vincular texto/html interno (como div, p, h1) a Trait
¡Hola! He creado un rasgo personalizado y quiero que me permitan cambiar el contenido de las etiquetas (en este caso es una etiqueta H1) ba...
Issue #3185
[PREGUNTA] ¿Cómo obtener el rasgo del modelo de un componente?
Hola, He añadido un nuevo tipo de "array" al TraitManager. Así que puedo añadir varios subrasgos. En un punto tengo que comprobar los rasgo...
Issue #1574
Pregunta, bloquear contenido del archivo
Hola, esto no es realmente un problema, sino más bien una pregunta. Actualmente estoy usando bloques personalizados en mi editor GrapesJS....
Issue #1545
[Pregunta] ¿Cómo consigo identificación de Block?
Hola, tengo mi bloque y recibo resultados de impresión en Div ID de mi componente de clase javascript... ¿Cómo consigo identificación de mi...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.