Binding Serialized Setting to JS for Realtime Response

I’m stuck in a situation. I’m developing a theme where I’m using the wordpress theme-customizer to build the settings page. I’m using the serialized method, something like this:

$wp_customize->add_setting( 'my_theme_options[link-textcolor]',
         array(
            'default' => '#2BA6CB',
            'type' => 'option', 
            'capability' => 'edit_theme_options',
            'transport' => 'postMessage',
         ) 
      );

And then I’m adding a function to add the JS once customizer loads:

Read More
function my_theme_js()
{
    wp_enqueue_script( 
          'my-theme-js',            
          get_template_directory_uri().'/js/customizer.js',
          array( 'jquery','customize-preview' ),
          '1.0',                        
          true
    );
}

add_action( 'customize_preview_init', 'my_theme_js' );

Now, in JS file, I’m doing something like this:

( function( $ ) {
    wp.customize( 'my_theme_options[link-textcolor]', function( value ) {
        value.bind( function( to ) {
            console.log('executed the method');
        } );
    } );
} )( jQuery );

Now, the issue here is: It works when I don’t use serialized method but, once I use the serialized method, it stops working. What is it that I’m missing here?

Related posts