Issue #2226Opened August 28, 2019by tliscomb1 reactions

[QUESTION] Updating a component type trait definition after init

Question

I have created a custom component & block which is used to display/embed uploaded files.

I have defined traits for this component see below. When a new file is uploaded I need to update the options of the selected-src trait so that the user can use the select in the settings panel to select the file to be displayed.

                        traits: ['title', 'id',
                            {
                                type: 'select',
                                label: 'file',
                                name: 'selected-src',
                                options: files
                            },
                            {
                                type: 'text',
                                label: 'Override',
                                name: 'override-src',
                                placeholder: 'path to file'
                            }
                        ],

Any help would be greatly appreciated.

Answers (2)

pouyamiralayiAugust 29, 20191 reactions

Hello! you must attach a listener for the file property, so whenever it changes to a new value(file), your listener will append it to the end of the options:

            model: {
                defaults: {
                    ['selected-src']: '',
                    tagName: 'div',
                    resizable: true,
                    content: '<b>UPLOAD</b>',
                    traits: [
                        {
                            id: 'selected-src',
                            type: 'select',
                            label: 'file',
                            name: 'selected-src',
                            options: files,
                            changeProp: 1,
                        },
                    ]
                }
            },
            view: {
                init() {
                    this.listenTo(this.model, 'change:selected-src', this.doStuff)
                },
                doStuff() {
                    const trait = this.model.getTrait('selected-src')
                    const traitOptions = [{name: 'new file', value: 'new file url'}]
                    trait.set('options', [...trait.get('options'), ...traitOptions])
                },
            }

NOTICE here i am listening to the changes on the selected-src itself, for your case you must listen to your file related property. NOTICE i see that for your selected-src trait definition, you have not specified changeProp. if it is intentional then you are dealing with an attribute of the component and listener attachment would be like this: init() { this.listenTo(this.model, 'change:attributes:selected-src', this.doStuff)} cheers.

artfSeptember 4, 20190 reactions

Yeah the key part proposed by @pouyamiralayi is here

const trait = this.model.getTrait('selected-src')
const traitOptions = [{name: 'new file', value: 'new file url'}]
trait.set('options', [...trait.get('options'), ...traitOptions])

This is how you update traits at run-time (more about this here)

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.