Actualización de la definición de rasgo de tipo de componente tras init
¡Hola! debes adjuntar un oyente para la propiedad del archivo, así que cada vez que cambie a un nuevo valor (archivo), Tu oyente lo añadirá al final de las opciones: AVISO aquí estoy escuchando los cambios en el propio src seleccionado, para tu caso debes escuchar la propiedad relacionada con tu archivo. NOTO Veo que...
Lee la respuesta completa abajo ↓Pregunta
He creado un componente y bloque personalizados que se usan para mostrar e incrustar archivos subidos.
He definido rasgos para este componente, véase más abajo. Cuando se sube un archivo nuevo, necesito actualizar las opciones del rasgo selected-src para que el usuario pueda usar el selecto en el panel de configuración para seleccionar el archivo que se va a mostrar.
Rasgos: ['Título', 'Id',
{
tipo: 'select',
etiqueta: 'archivo',
Nombre: 'Selected-SRC',
Opciones: archivos
},
{
Tipo: 'texto',
etiqueta: 'Override',
Nombre: 'Override-SRC',
Marcador: 'ruta al archivo'
}
],
Cualquier ayuda sería muy apreciada.
Respuestas (2)
¡Hola! debes adjuntar un oyente para la propiedad del archivo, así que cada vez que cambie a un nuevo valor (archivo), Tu oyente lo añadirá al final de las opciones:
modelo: {
Predeterminados: {
['seleccionado-src']: '',
etiquetaNombre: 'div',
redimensionable: cierto,
contenido: '<b>SUBIR'</b>,
Rasgos: [
{
id: 'selected-src',
tipo: 'select',
etiqueta: 'archivo',
Nombre: 'Selected-SRC',
opciones: archivos,
cambioProp: 1,
},
]
}
},
Vista: {
init() {
this.listenTo(this.model, 'change:selected-src', this.doStuff)
},
doStuff() {
const trait = this.model.getTrait('selected-src')
const traitOptions = [{name: 'nuevo archivo', valor: 'nueva URL de archivo'}]
trait.set('options', [... trait.get('options'), ... OpcionesTrait])
},
}
AVISO aquí estoy escuchando los cambios en el propio src seleccionado, para tu caso debes escuchar la propiedad relacionada con tu archivo.
NOTO Veo que para la definición de rasgo seleccionado-src, no has especificado changeProp. Si es intencionado, entonces estás tratando con un atributo del componente y el apego al oyente sería así:
init() { this.listenTo(this.model, 'change:attributes:selected-src', this.doStuff)}
Salud.
Sí, la parte clave propuesta por @pouyamiralayi está aquí '''js const trait = this.model.getTrait('selected-src') const traitOptions = [{name: 'nuevo archivo', valor: 'nueva URL de archivo'}] trait.set('options', [... trait.get('options'), ... OpcionesTrait])
Así es como se actualizan los rasgos en tiempo de ejecución (más sobre esto [aquí](https://grapesjs.com/docs/modules/Traits.html#updating-traits-at-run-time))
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1674
Renderizar bloque tras la acción del rasgo.
He creado un nuevo bloque llamado barra lateral que tiene actualizaciones dinámicas por componente de rasgo, contienen casillas para cambia...
Issue #845
Imposible seleccionar Iframe
He creado un nuevo tipo de componente, un iframe general, evitando seleccionar el mapa, pero cuando intento seleccionarlo en el lienzo para...
Issue #2136
[PREGUNTA] Tipo de componente personalizado no encontrado y rasgos que no funcionan tras cargar la página
Hola @artf He creado un componente personalizado muy básico llamado 'customsection' que usa rasgos para cambiar el color de fondo del compo...
Issue #1100
no se puede actualizar el valor de los traits en el HTML para un componente personalizado
He creado un componente personalizado para los iconos sociales. Cuando selecciono este componente tengo dos rasgos: configurar la URL de Fa...
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.