Understanding WordPress Customizer JS API

Question

I have been trying to educate myself to create new panels sections and controls dynamically using the WordPress customizer's JS API.

It has been frustrating and I was unable to get the exact way to achieve this via JS API.

So far, this is some thing I am doing to make it happen but with no success:

// for Settings
api.create( 
    params.id, 
    params.id, 
    params.default, 
    params.args 
);

// for controls
var controlConstructor = api.controlConstructor[controlparams.type];
var control = new controlConstructor(controlparams.id, {
    params: controlparams,
    previewer: api.previewer
});
api.control.add( 
    controlparams.id, 
    control 
);

 //for Sections
 var section = new api.Section(sectionparams.id, { 
    params: sectionparams
 }); 
api.section.add( sectionparams.id, section );
api.section(sectionparams.id).activate();

None of them seem to work as the section doesn't appear and I have to run wp.customize.section(sectionparams.id).activate() twice in console to make the section appear, the same is with control.

Answer 1

Read the documentation about the JS API

You also can find advanced examples in this plugin