Issue #2628💬 AnsweredOpened March 8, 2020by abzal02 reactions

How to update the trait value

快速解答by pouyamiralayi1

@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: Cheers!

Read full answer below ↓

Question

代码片段TEXT
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, 2020

@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, 2020

@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, 2020

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.