What type of template are WP media-modal’s templates?

by

I was looking at the WordPress templates (html that’s written to the page instead of awkwardly adding strings in JS).

There are a lot of templates like this in a post editor for example:

<script type="text/html" id="tmpl-uploader-status-error">
        <span class="upload-error-filename">{{{ data.filename }}}</span>
        <span class="upload-error-message">{{ data.message }}</span>
    </script>

Now, I know these can be referenced with wp.media.template('uploader-status-error')( data ) to get html rendered for example, but what type of template is this? I would think this would be underscore since wp-views are Backbone, but it looks like they aren’t the underscore syntax. Where is this documented?

1 Answer
1

Here’s an interesting part from http://underscorejs.org/#template

If ERB-style delimiters aren’t your cup of tea, you can change
Underscore’s template settings to use different symbols to set off
interpolated code. Define an interpolate regex to match expressions
that should be interpolated verbatim, an escape regex to match
expressions that should be inserted after being HTML-escaped, and an
evaluate regex to match expressions that should be evaluated without
insertion into the resulting string. You may define or omit any
combination of the three. For example, to perform Mustache.js-style
templating:

_.templateSettings = {   interpolate: /\{\{(.+?)\}\}/g };

var template = _.template("Hello {{ name }}!"); template({name: "Mustache"});

=> “Hello Mustache!”

If we check out /wp-includes/js/wp-util.js we see how these interpolate, escape and evaluate regular expressions are defined in WordPress:

/**
 * wp.template( id )
 *
 * Fetch a JavaScript template for an id, and return a templating function for it.
 *
 * @param  {string} id   A string that corresponds to a DOM element with an id prefixed with "tmpl-".
 *                       For example, "attachment" maps to "tmpl-attachment".
 * @return {function}    A function that lazily-compiles the template requested.
 */
wp.template = _.memoize(function ( id ) {
        var compiled,
                /*
                 * Underscore's default ERB-style templates are incompatible with PHP
                 * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
                 *
                 * @see trac ticket #22344.
                 */
                options = {
                        evaluate:    /<#([\s\S]+?)#>/g,
                        interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
                        escape:      /\{\{([^\}]+?)\}\}(?!\})/g,
                        variable:    'data'
                };

        return function ( data ) {
                compiled = compiled || _.template( $( '#tmpl-' + id ).html(), null, options );
                return compiled( data );
        };
    });

and note this comment:

/*
 * Underscore's default ERB-style templates are incompatible with PHP
 * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
 *

Here’s the relevant ticket #22344 and discussion about it.

Leave a Comment