How to enqueue the script without hardcoded in the theme files?

Question

I have been working on the Custom Gallery Layout style and was wondering how do I enqueue and make the following script working without hard coded in the file. Or is there a better way of adding it via inline script wp_add_inline_script().

I tried with wp_add_inline_script() but that didn't helped. May be I was doing something wrong.

How to add the localize or enqueue the code which is nested with <script>...</script> tags in the below code.

add_action('print_media_templates', function() {
// define your backbone template;
// the "tmpl-" prefix is required,
// and your input field should have a data-setting attribute
// matching the shortcode name

$gallery_types = apply_filters('print_media_templates_gallery_settings_types',
    array(
        'justified' => esc_html__( 'Justified','textdomain' ),
        'grid'      => esc_html__( 'Grid','textdomain' ),
        'slider'    => esc_html__( 'Slider','textdomain' ),
        'default_val'    => esc_html__( 'Default','textdomain' ),
    )
);
?>
<script type="text/html" id="tmpl-custom-gallery-type-setting">
    <label class="setting">
        <span><?php esc_html_e( 'Layout Type' ); ?></span>
        <select data-setting="type">
        <?php
        foreach ( $gallery_types as $key => $value ) {
            echo "<option value=\"$key\">$value</option>";
        }
        ?>
        </select>
    </label>
</script>
<script>
jQuery(document).ready(function(){

    // add your shortcode attribute and its default value to the
    // gallery settings list; $.extend should work as well...
    _.extend(wp.media.gallery.defaults, {
        type: 'default_val'
    });

    // join default gallery settings template with yours -- store in list
    if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
    wp.media.gallery.templates.push('custom-gallery-type-setting');

    // merge default gallery settings template with yours
    wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function (view) {
            var output = '';
            for (var i in wp.media.gallery.templates) {
                output += wp.media.template(wp.media.gallery.templates[i])(view);
            }
            return output;
        }
    });
});

Answer 1

//add the JS code in a variable - without <script>
$script = "
jQuery(document).ready(function(){

// add your shortcode attribute and its default value to the
// gallery settings list; $.extend should work as well...
_.extend(wp.media.gallery.defaults, {
    type: 'default_val'
});

// join default gallery settings template with yours -- store in list
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.push('custom-gallery-type-setting');

// merge default gallery settings template with yours
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
    template: function (view) {
        var output = '';
        for (var i in wp.media.gallery.templates) {
            output += wp.media.template(wp.media.gallery.templates[i])(view);
        }
        return output;
    }
});
});";
//add the code to the script that is already enqueued with wp_enqueue_script() 
//use the same handle
wp_add_inline_script('handle_of_script_you_want_modified', $script);