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 =
</ 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">
< 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:
Article Tags :