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="https://wordpress.stackexchange.com/questions/239619/{{ 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.

1 Answer
1

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

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *