Issue #895💬 AnsweredOpened February 23, 2018by alvim0 reactions

Update script won't refresh component script properly after autoloading component from html in localStorage

快速解答by artf

gjs-html contains the final HTML, the HTML your users will gonna see so it's correct that you see the script "compiled". For a correct editing, you have to rely on gjs-components which is basically a JSON representation of the template and so contains all the informations about your components

Read full answer below ↓

Question

I'm using GrapesJS v0.14.5 in a local copy. OS: Ubuntu 16.04 LTS Browser: Chrome Version 64.0.3282.140 (Official Build) (64-bit) I think I can't reproduce it from the demo

I have a component with the current script:

script: function () {
    console.log('Running script!', '{[ timestamp ]}');
    var timestamp = '{[ timestamp ]}';
    var comp = xGrapes.comp;

    var vm = new Vue({
        el: `#app-container-${timestamp}`,
        components: {
            comp: comp
        },
        data: function () { return { msg: "{[ message ]}" } },
        template: '<div><h1>{{msg}}</h1><p>Great!</p><comp message="{[ anotherMessage ]}"></comp></div>'
    });
}

(The "comp" variable part is from a plugin functionality I'm currently developing, but I think you can ignore it)

As you can see I'm rendering a Vue component. This component has some data binded using traits. When I add the component in canvas and change it's traits, the script is immediately updated and reload the component with the new message, since I'm using updateScript method, as you can see here:

init() {

    this.insertAppContainer()

    this.listenTo(this.model, 'change:message change:anotherMessage', this.onChangeProps);
    editor.on('load', this.onChangeProps.bind(this));
},

onChangeProps() {
    this.insertAppContainer();
    this.updateScript();
}

So far everything worked as expected. :+1: If I refresh the page my canvas is reloaded with HTML content stored in localStorage item gjs-html, since I have storageManager.autoload = true.

Now if I update my traits properties with a new value the messages arent't updated at all (it continues showing the last value saved before the update) and I noticed why: Before the page refresh, if I console.log my model.attributes.script, this is the result: screenshot from 2018-02-23 15-30-22 After the page refresh, this is the result: screenshot from 2018-02-23 15-32-25

The script function is stored in gjs-html as a string with the hardcoded variables. After the reload it does not have the notation like {[ message ]} but the last saved value itself.

I hope I had been clear. Thank you! :smile:

Answers (2)

artfMarch 1, 2018

gjs-html contains the final HTML, the HTML your users will gonna see so it's correct that you see the script "compiled". For a correct editing, you have to rely on gjs-components which is basically a JSON representation of the template and so contains all the informations about your components

lock[bot]September 18, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

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.