Issue #2226💬 RespondidoAbierto el 28 de agosto de 2019por tliscombReacciones 1

Actualización de la definición de rasgo de tipo de componente tras init

Respuesta rápidapor pouyamiralayi1

¡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)

pouyamiralayi29 de agosto de 2019

¡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.

artf4 de septiembre de 2019

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.

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.