[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)
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.
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.
Issue #486
Custom Component not editable and also after traits update canvas does not update
below is code i used for traits and custom section but after adding component via block, cannot edit text or trait update does not update c...
Issue #2007
[QUESTION] Adding new traits to component and update current ones with these
I have some custom components created before modifying their traits (for example, I created a new trait for it), these components wont cont...
Issue #2193
[QUESTION] Reset trait on edit the content of a custom component
Hi, I have a custom component which content can be changed by switching trait select options, but also can be edited similar to the text co...
Issue #2136
[QUESTION] custom component type not found and traits not working after page load
Hi @artf I have created a very basic custom component named 'customsection' which uses traits to change the component's background-color by...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.