- Jquery Template(jquery.tmpl.min.js) can be downloaded from following link,
- In this Demo,“We will see how jquery template work.The data is JSON data and loaded through AJAX call”.
- The project Structure:
- The tempate use ${
} for substitute real value in markup.
- The tmpl() create the template build as Jquery function to attach data.
- The JSON file used for the demo is in demo.json file.It is listed below.
[
{
"title": "Sandeep",
"cost": 14,
"description": "Lorem ipsum dollar.Lorem ipsum dollar."
},
{
"title": "Surabhi",
"cost": 12,
"description": "ipsum dollar.Lorem ipsum dollar.Lorem ipsum dollar."
},
{
"title": "Sangeeta",
"cost": 14,
"description": "Lorem ipsum dollar. dollar.Lorem ipsum dollar."
},
{
"title": "Sumanta",
"cost": 10,
"description": "Lorem ipsum dollar.Lorem ipsum ipsum dollar."
},
{
"title": "Bapi",
"cost": 17,
"description": "Lorem ipsum dollar.Lorem ipsum dollar."
},
{
"title": "Rohan",
"cost": 13,
"description": "Lorem ipsum dollar.Lorem ."
}
]
- The HTML markup is listed below in template-demo.html file.
<!DOCTYPE html>
<html>
<head>
<title>Jquery Template Demo</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.ts-panel{
width:200px;
margin:70px;
display: inline-block;
}
</style>
</head>
<body>
<div class="ts-product-container"></div>
<script id="aProductTemplate" type="text/x-jquery-tmpl">
<div class="ts-panel panel panel-info">
<div class="panel-heading">
<h5>${title}</h5>
</div>
<div class="panel-body">
${description}
</div>
<div class="panel-footer">
Income : ${cost}
</div>
</div>
</script>
<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.tmpl.min.js"></script>
<script src="app.js"></script>
</body>
</html>
- The Jquery script is listed in app.js
var PRODUCT_APP={
getProductDetails : function(){
var ajaxRequest=$.ajax("data.json");
return ajaxRequest.promise();
},
handleCallback : function(){
var promise = PRODUCT_APP.getProductDetails();
promise.done(function(data){
PRODUCT_APP.doProductRendering(data);
});
},
doProductRendering: function(data){
var productContainer =$('.ts-product-container'),
aProductTemplate = $('#aProductTemplate').tmpl( data );
productContainer.html(aProductTemplate);
}
};
$(document).ready(function(){
PRODUCT_APP.handleCallback();
});
- The output will look like below
- The demo can be downloaded from the below link:-
