2

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?

3

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.

  • Good info. I wonder why Underscore didn't change to this syntax if it always breaks with PHP asp-style tags. – NoBugs Nov 18 '15 at 2:55
  • good question, and similarly using it with asp or embedded ruby files (erb) ;-) @NoBugs – birgire Nov 18 '15 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.