What is x-tmpl?

Last Updated : 09 Sep, 2020

The x-tmpl stops the browser from interpreting the script JavaScript. To use JQuery x-tmpl we need the jquery-tmpl JavaScript file. The jQuery.tmpl() method chains the .appendTo, .prependTo, .insertAfter or .insertBefore methods.

Syntax:

tmpl([data], [options])

E.g:

$("#myTemplate").tmpl(Data).appendTo("ul");

$.tmpl(template, [data], [options])(string containing markup, 
HTML Element, or Name of named template)

E.g:

$.tmpl("namedTemplate", Data).appendTo("ul");

Example:

$.tmpl( "<li>${Name}</li>", { "Name" : "GFG" }).appendTo( "#target" );

JQuery x-tmpl is used for template composition.

Usage of x-tmpl(Client-side):

Install the blueimp-tmpl package with npm:

npm install blueimp-tmpl

Include JavaScript Templates script in HTML markup:

<script src="js/tmpl.min.js"></script>
// Implementing them into the variables. 
var template = '<p>Hello!</p>' ;

Add a script section with type “text/x-tmpl”:

<script type="text/x-tmpl" id="tmpl-demo">
  <h3>GFG}</h3>
  <h4>Features</h4>
 <ul>
 {% for (var i=0; i<o.features.length; i++) { %}
     <li>{%=o.features[i]%}</li>
 {% } %}
 </ul>
</script>

Create a JavaScript object to use data for the template:

var data = {
 title:  'GFG',
 geeky: {
   name: 'GFG',
   
 },
 features: ['more content', 'powerful', 'zero dependencies']
}

Call the tmpl() method:

document.getElementById('result').innerHTML = tmpl('tmpl-demo', data)

Usage of x-tmpl(Server-side):

Install the blueimp-tmpl package with NPM:

npm install blueimp-tmpl

Add a file template.html:

<!DOCTYPE HTML>
<title>GFG</title>
<h4>Features</h4>
<ul>
{% for (var i=0; i<o.features.length; i++) { %}
   <li>{%=o.features[i]%}</li>
{% } %}
</ul>

Add a file server.js :

require('http')
 .createServer(function (req, res) {
   var fs = require('fs'),
    tmpl = require('./tmpl'),
   data = {
       title: 'JavaScript Templates',
       url: 'https://github.com/blueimp/JavaScript-Templates',
       features: ['more content', 'powerful', 'zero dependencies']
     }
   
   tmpl.load = function (id) {
     var filename = id + '.html'
     console.log('Loading ' + filename)
     return fs.readFileSync(filename, 'utf8')
   }
   res.writeHead(200, { 'Content-Type': 'text/x-tmpl' })
  
   res.end(tmpl('template', data))
 })
 .listen(8080, 'localhost')
console.log('Server running at http://localhost:8080/')

Run the application:

node server.js

Example: A simple Example of x-tmpl.

<script type='text/x-jquery-tmpl' id='person-template'>
 <div class='person'>
   <strong>Name: </strong> ${ Name } <br/>
   <strong>Age: </strong> ${ Age } <br/>
   <strong>Country: </strong> ${ Country } <br/>
 </div>
</script>

Now, let implement the above code with the required output:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <script src=
"http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
        </script>
  
        <body>
            <h3>Employee Details</h3>
            <div class="emp-detais"></div>
        </body>
  
        <script type="text/x-jquery-tmpl" 
                id="emp-template">
            <div class='person'>
              <strong>Name:</strong> ${ Name } <br />
              <strong>Skills: </strong><br />
              {{each Skills}}
                ${Skill} <br />
              {{/each}}
            </div>
        </script>
    </body>
</html>

Example 2:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR
  /xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Template Caching</title>
        <link href="6_Site.css" 
              rel="stylesheet" 
              type="text/css" />
    </head>
    <body>
        <h1>Products</h1>
  
        <div id="productContainer"></div>
  
        <button id="more">More</button>
  
        <script type="text/javascript" src=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js">
        </script>
        <script type="text/javascript" src=
"http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js">
        </script>
  
        <script type="text/javascript">
            // Globals
            var pageIndex = 0;
  
            // Create an array of products
            var products = [];
            for (var i = 0; i < 100; i++) {
                products.push({ name: "Product " + (i + 1) });
            }
  
            // Get the remote template
            $.get("ProductTemplate.htm", null, function (productTemplate) {
                // Compile and cache the template
                $.template("productTemplate", productTemplate);
  
                // Render the products
                renderProducts(0);
            });
  
            $("#more").click(function () {
                pageIndex++;
                renderProducts();
            });
  
            function renderProducts() {
                // Get page of products
                var pageOfProducts = 
                    products.slice(pageIndex * 5, pageIndex * 5 + 5);
  
                // Used cached productTemplate to render products
                $.tmpl("productTemplate", pageOfProducts)
                  .appendTo("#productContainer");
            }
  
            function formatPrice(price) {
                return "$" + price.toFixed(2);
            }
        </script>
    </body>
</html>

Output:

My Personal Notes

Related Articles

Table of Contents

What is x-tmpl?

HTML

HTML

Start Your Coding Journey Now!