5

I've been trying to Google to find this solution but am still uncertain. Can anyone help me out?

This is the most probably solution I've found, but I'm still not sure if it's correct: https://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js

{{}} are Angular expressions and come quite handy when you wish to write stuff to HTML

Knowing that WordPress incorporates mediaelement.js for it's media playback (I am not sure if it's related to Angular.js)..

Let's take an excerpt from the wp_underscore_playlist_templates

<script type="text/html" id="tmpl-wp-playlist-current-item">
    <# if ( data.image ) { #>
    <img src="{{ data.thumb.src }}"/>
    <# } #>
    <div class="wp-playlist-caption">
            <span class="wp-playlist-item-meta wp-playlist-item-title">{{ data.title }}</span>
            <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
            <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
    </div>

What I'm trying to do is customize this playlist template and add my own variables.

But I'm used to dealing with WordPress and PHP $variables.

What kind of variables are these and where in WordPress are they defined? data.image data.thumb.src data.title data.meta.album data.meta.artist etc.

  • This is not Angular, it's Underscore.js and it's a template used by wp.template. You can read up on it in the codex. I would try and search through the source code using grep or your IDE's search to find where wp-playlist-current-item is used in the source and work backwards. – brianjohnhanna Sep 20 '16 at 19:22
  • Thanks for the reply and codex link to wp.template. It states Interpolate (unescaped): {{{ }}} Interpolate (escaped): {{ }} Evaluate: <# #> Which helps explain the syntax a lot. What I ended up doing is just encapsulating php in here like this : <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist"><?php echo $artist; ?></span><# } #> – bbruman Sep 20 '16 at 23:09
2

Those are the Mustache-inspired syntax you are talking about. That can be acheived using wp.template Wordpress function. The script you showing is javascript templating in WordPress

  • wp.template() is a cool little JavaScript utility method
  • WordPress uses this utility to load templates for all of the backbone views, but backbone is not required to use it.
  • Because all of WordPress uses this templating method/system, you will want to make sure you properly prefix your ids, so as not to conflict with another template that may be loaded on the page. That script tag should also have a type of “text/template
  • WordPress-specific interpolation syntax is inspired by Mustache templating

    syntax:
    Interpolate (unescaped): {{{ }}}
    Interpolate (escaped): {{ }}
    Evaluate: <# #>

For Reference:

 - https://lkwdwrd.com/wp-template-js-templates-wp/ 
 - https://codex.wordpress.org/Javascript_Reference/wp.template 

Hope that helps!!

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.