Issue #2628Opened March 8, 2020by abzal02 reactions

How to update the trait value

Question

Code SnippetTEXT
Hello @artf  thanks a lot for a great project, 
I have created a new type, it is similar to regular link, but the link title updates with ajax. Then updates the trait 'linktitle'. The value of it and the canvas do update, but the trait inside "Settings" still shows the initial value and does not changes. 
Part of the code that must update the value:

editor.DomComponents.addType('newLink', {
model: {
    defaults: {
         components: [	
				{
					highlightable: true,
					editable: true,
					selectable: true
				}],
         traits: [
						{
							type: 'text',
							label: 'Url',
							name: 'url',
							value: 'https://',
							changeProp: 0
						},
						{
							type: 'text',
							label: 'Title',
							name: 'linktitle',
							value: 'Link title', //this must be updated
						changeProp: 0
						}
      ]}},
        view:{
          		tagName: 'div',
			init({ model }) {
			this.listenTo(model, 'change:attributes', model => {
	//First attempt	
editor.getSelected().updateTrait('linktitle', {
type: 'text',
label: 'Title 2',
name: 'linktitle',
value: 'AA', //updating the value to AA
changeProp: 0
});
//shows undefined on canvas but only updates the label, need to update the value
//second attempt
this.model.attributes.attributes.title=' BB ';	
//updates the canvas link to BB, but does not update the trait
editor.trigger('component:toggled');
editor.trigger('component:updated');
editor.trigger('component:update:linktitle');
editor.trigger();  
				});
			},
        }
   }
)

Any suggestion how to update the trait value would be helpful.

Answers (3)

pouyamiralayiMarch 9, 20201 reactions

@abzal0 alright! although the prop approach must work fine, i am not sure why it is not, or i am missing something here! if we want to go with attributes, you must use addAttributes for changing the attribute, here is a working example of the procedure:

  domc.addType('test', {
        model: {
            init() {
                this.listenTo(this, 'change:attributes:linkTitle', () => console.log('linkTitle', this.getAttributes()['linkTitle']))
            },
            defaults: {
                attributes: {
                    linkTitle: '',
                },
                style: {
                    padding: '25px',
                    margin: '25px',
                },
                traits: [
                    {type: 'text', name: 'linkTitle', changeProp: false, label: 'Link Title'}
                ]
            }
        },
        view: {
            init() {
                const oldValue = this.model.getAttributes()['linkTitle']
                console.log('linkTitle: ', oldValue)
                this.model.addAttributes({'linkTitle':oldValue + ' Changed!'})
            }
        }
    })

Cheers!

abzal0March 9, 20201 reactions

@pouyamiralayi thanks a lot for your time, this solved the issue: this.model.addAttributes({'linkTitle':oldValue + ' Changed!'}) you saved so much time, thanks again :)

abzal0March 8, 20200 reactions

editor.getSelected().getTrait('linktitle').set('value','CCC');

does not works too

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.