web-dev-qa-db-fra.com

Quel type de modèle sont WP les modèles de media-modal?

Je regardais les modèles Wordpress (html qui est écrit sur la page au lieu d'ajouter maladroitement des chaînes dans JS).

Il y a beaucoup de modèles comme celui-ci dans un éditeur de publication, par exemple:

<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>

Maintenant, je sais que ceux-ci peuvent être référencés avec wp.media.template('uploader-status-error')( data ) pour obtenir le rendu HTML par exemple, mais de quel type de modèle s'agit-il? Je penserais que ce serait un trait de soulignement puisque wp-views est un Backbone, mais il semble qu’ils ne sont pas la syntaxe de soulignement . Où est-ce documenté?

javascriptmedia-modalbackboneunderscore
2
NoBugs

Voici une partie intéressante de http://underscorejs.org/#template

Si les délimiteurs de style ERB ne sont pas votre tasse de thé, vous pouvez modifier les paramètres de modèle Underscore pour utiliser différents symboles afin de définir le code interpolé. Définissez un interpolateregex pour correspondre aux expressions qui doivent être interpolées textuellement, un escaperegex pour correspondre aux expressions qui doivent être insérées après avoir été échappé au format HTML , et un évaluerregex pour faire correspondre les expressions à évaluer sans insertion dans la chaîne résultante. Vous pouvez définir ou omettre toute combinaison des trois. Par exemple, pour effectuer un modèle de style Moustache.js:

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

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

=> "Bonjour Moustache!"

Si nous vérifions /wp-includes/js/wp-util.js, nous voyons comment ces expressions régulières interpolent , échappent et évaluent (Word ++) :

/**
 * 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 );
        };
    });

et notez ce commentaire:

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

Voici le ticket approprié # 22344 et une discussion à ce sujet.

3
birgire