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']
}
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>
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/')
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=
</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
/xhtml1/DTD/xhtml1-transitional.dtd">
<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=
</script>
<script type="text/javascript" src=
</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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...