Accessing customizer values in javascript

Question

I'm using a page builder (Divi) and have made several custom controls for the Theme Customizer. No problems hooking up the live preview using postMessage. The issue is that I want to change the content of the DOM using jQuery based on what is selected in the Customizer. Because I'm using a page builder I'm not writing php in the page template to utilize get_theme_mod(). Is there another way to access the controls values on the client side with javascript? Thanks!

Answer 1

Given a setting with an ID of “foo” you can obtain the value via:

var value = wp.customize( 'foo' ).get()

To ensure that the setting is registered before you attempt to get its value, you can use this deferred pattern:

wp.customize( 'foo', function( setting ) {
    var value = setting.get();
    // ...
});

This should look familiar because these calls are very common in JS that gets enqueued in the Customizer preview for handling setting change previews via postMessage.