Issue #1227Opened June 22, 2018by smaqeelkazmi0 reactions

Re-render view in editor's canvas whenever Trait value changes

Question

Is there any possible way in grapesjs that whenever a user changes the value of a Trait of a custom component the render function should listening or be re-render?

I'm building a custom component for dynamic contents. The custom component code is:

domComps.addType('dynamicImage', {
        model: dModel.extend({
            defaults: Object.assign({}, dModel.prototype.defaults, {
                traits: [
                    // strings are automatically converted to text types
                    'src',
                    'title',
                    {
                        label: 'Dummy Image',
                        name: 'data-dummyimage',
                        value: 'http://localhost/templates/assets/logo.png'
                    }
                ],
            }),
        }, {
            isComponent: function (el) {  
                return { type: 'image' }
            }
        }),

        view: dView.extend({
            events: {  },
            render: function () {  
                dView.prototype.render.apply(this, arguments);
                this.el.src = this.el.dataset.dummyimage;
                return this;
            }
        })
    });

I want that whenever user change the value of Trait called Dummy Image the render function should run and effect the src value accordingly in the canvas result for img tag.

This is to only effect the view in editor's canvas but not in model.

Can somebody help me to solve this?

Thanks in advance. :)

Answers (3)

artfJune 24, 20180 reactions

Update your view in this way

view: dView.extend({
	init() {
		this.listenTo(this.model, 'change:attributes:data-dummyimage', this.render)
	},
	...
})
mararn1618September 13, 20180 reactions

After 2 days this saved my life. Thanks to both of you!

vitanshuDecember 27, 20180 reactions

But properties of html are not editable in canvas.

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.