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

Question

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

NoBugs

2015年11月17日 09:19

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?

Topic backbone underscore media-modal Wordpress javascript

Category Web

birgire · Accepted Answer · 2015年11月17日 09:19

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.

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

About