What Is X-Tmpl

What is x-tmpl?

x-tmpl has no real meaning, it simply stops the browser from interpreting the script as javascript.

It's mostly used with jquery templates or knockoutjs template binding.

At some point, a javascript data object will be used in conjunction with the template to render some html. The values in the data object will replace those marked with {%} and similar in the template, with some {%} sections reflecting code flow such as loops etc.

I'm not sure which templating library uses {%} however, it's not jquery templates, jsrender or knockout. You'd have to check what libraries are being referenced in the sample code.

understanding Jquery template

This contains a reference to a template named "titleTemplate", a template which has not yet been defined:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
  {{tmpl "titleTemplate"}}
  <tr class="detail"><td>Director: ${Director}</td></tr>
</script>

This line defines that missing template:

$.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" );

It is another way of saying

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
  <tr class='title'><td>${Name}</td></tr>
</script>

In essence the example shows that you can define templates in two ways

• declaratively in the HTML source code, as <script type="text/x-jquery-tmpl"> elements
• programmatically from strings through $.template()

jQuery Template - Executing JS code inside the template

Anthony, you can. The method your calling needs to be inside a template tag like so:

<script id="log-item" type="text/x-jquery-tmpl">
 {{if title.length }}
   <h3 style="padding-bottom:5px;">${ title }</h3>
 {{/if}}
 <p>
    Detail: ${ objectToString( detail ) }
 </p>
</script>

Can I import x-template script into HTML file?

No, x-template must be local. The <script> element's src attribute is ignored when the type attribute is anything other than module or a JavaScript MIME type, according to MDN:

The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The src attribute will be ignored.

Some frameworks support an external template through other means (i.e. templateUrl, etc) but Vue doesn't. Here is Evan You's (Vue Creator) explanation for why:

it’s in fact much simpler if things are just in the same file. The context switching of jumping back and forth between two files actually makes the development experience much worse

the number of HTTP requests is still probably the most critical factor in your app’s initial load performance. Now imagine you use templateURL for every component in your app - the browser needs to perform dozens of HTTP requests before even being able to display anything

Of course, you can create your own loader to AJAX the content just like you would load any external file manually, regardless of content, as a string. Or you can use the Vue CLI which uses a similar loader.

Append an LI to text/x-jquery-tmpl

It turned out I was trying to insert html data into my template. That HTML was being interpreted as text. I ended up creating a new template for the LIs and then appended the tmpl to the UL.
Created a template:

  <script id="tmp_servicebuttons" class="template" type="text/x-jquery-tmpl">
        <li><a class="notification" href="${id}"><img src="${imgsrc}"/></a></li>
  </script>

then appended the populated data to the UL

var data = JSON.parse(buttons);
$(data).each(function(){
    var data = [{"id": this.id, "imgsrc": this.imgsrc}];
    $("#tmp_servicebuttons").tmpl(data).appendTo(".top_bar_notifications");
});

---

Related Topics