Parent to child and child to parent (bidirectional) communication in Visual Composer shortcode

vc-parent-child-communication.js

/**
 NOTES:
 ========================
 0. Extend container view from "VcColumnView" so that you get a clean UI.
 1. Render method called after element is added (cloned), and on first initalization.
 2. Use model.getParam(param_name) to get specific param from params.
 3. Use model.get("params") to get complete params object.
 4. If params is changed then shortcode will be rendered automatically.
 5. You do not need to override method that you are not going change, in our file "render".
 **/

/* ======================
 * Container View
 * ======================*/
window.ContainerView = VcColumnView.extend({
    // We can ommit this
    render: function () {
        window.ContainerView.__super__.render.call(this);
        return this;
    },

    changeShortcodeParams: function (model) {
        var childCollection;
        
        childCollection = this.getChildren();
        // Updating child from parent
        _.each(childCollection, function(childModel) {
            var params;
            
            params = _.extend({"param_name": "paramValue"}, childModel.get("params"));
            childModel.set("params", params);
        });
      
        window.ContainerView.__super__.changeShortcodeParams.call(this, model);
    },

    getChildren: function() {
        return vc.shortcodes.where({parent_id: this.model.id});
    }
});


/* ======================
 * Child View
 * ======================*/
window.ChildView = vc.shortcode_view.extend({
    // We can ommit this
    render: function () {
        window.ChildView.__super__.render.call(this);
        return this;
    },

    changeShortcodeParams: function (model) {
        var parentID, parentModel, params;
        
        // Updating parent from child
        parentID = this.model.get("parent_id");
        parentModel = vc.shortcodes.get(parentID);
        params = _.extend({"param_name": "paramValue"}, parentModel.get("params"));
        parentModel.set("params", params);

        window.ChildView.__super__.changeShortcodeParams.call(this, model);
    },
});