Issue #395Opened October 9, 2017by suchithmahadi0 reactions

How to call a function which is outside the component in script function of component.

Question

Code SnippetTEXT
Please help in solving the below issue.
How to call a function which is outside the component in script function of component.
ex:
demo.myFunction function should be called in component script, but script is not able to recognize demo variable. Where as demo.myFunction can be called in init function.


grapesjs.plugins.add('my-plugin', function(editor, options) {

    var demo = {
            this.myFunction(id){
            alert(this.id);
        }
    }


    var domComponents = editor.BlockManager;
    domComponents.add('my-block', {
        id: 'myComp',
        label: 'Custom',
        category: 'plugin',
        attributes: {
            class: 'fa fa-square-o'
        },
        style: {
            padding: '100px'
        },
        content: {
            type: 'myComp'
        }
    });


    var comps = editor.DomComponents;


    var defaultType = comps.getType('default');
    var defaultModel = defaultType.model;
    var defaultView = defaultType.view;

    comps.addType('myComp', {
        model: defaultModel.extend({
                init(){
                    // working fine
                    demo.myFunction(this.id);
                },

                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                    removable: true,
                    draggable: true,
                    style: {
                        // 'background-color':'yellow',
                    },
                    editable: true,
                    copyable: true,
                    badgable: true,
                    highlightable: true,
                    resizable: true,
                    droppable: true,
                    content: `<svg style="width:90%;">
                    </svg>`,
                    script: function() {
                        console.log(this);
                        //not working
                        demo.myFunction(this.id);
                    },

                })
            },
        // Define the View
        view: defaultType.view.extend({
            render: function() {
                defaultType.view.prototype.render.apply(this, arguments);
                return this;
            },
        }),
    });
})


Thank you.

Answers (2)

artfOctober 9, 20170 reactions

You'll find the answer here #358

lock[bot]September 18, 20190 reactions

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.