JQuery
Templates enable you to display and manipulate data in the browser. For
example, you can use jQuery Templates to format and display a set of database
records that you have retrieved with an Ajax call.
We
will go through the basics of JQuery templates and then see an example usage. To
use JQuery template you need to include the jquery-tmpl javascript file.
You
can get this at
https://github.com/BorisMoore/jquery-pl/blob/master/jquery.tmpl.min.js
and copy the contents and save it in a file with whatever name you want.
Let’s use ‘jquery.tmpl.min.js’ (same as in the source).
https://github.com/BorisMoore/jquery-pl/blob/master/jquery.tmpl.min.js
and copy the contents and save it in a file with whatever name you want.
Let’s use ‘jquery.tmpl.min.js’ (same as in the source).
You
also need JQuery. You can get JQuery 1.10 here
http://code.jquery.com/jquery-1.10.2.min.js
Save this also in the similar way.
http://code.jquery.com/jquery-1.10.2.min.js
Save this also in the similar way.
Here’s
the complete code:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Intro</title>
</head>
<body>
<divid="pageContent"style="">
<h1>Widgets Gallery</h1>
<divid="widgetsContainer"></div>
</div>
<scriptid="widgetsTemplate"type="text/x-jQuery-tmpl">
<div style="border:1px
solid;text-align:center;height:150px;width:450px" >
<img style="height:60px"
src="${picture}" alt="" />
<h2>${title}</h2>
Price: ${formatPrice(price)}
</div>
</script>
<scripttype="text/javascript"src="jquery-1.10.2.min.js"></script>
<scripttype="text/javascript"src="jquery.tmpl.min.js"></script>
<scripttype="text/javascript">
// Create an widgets
var widgets = [
{
title: "iPad", price: 37.79,
picture: "iPad.png" },
{
title: "Monitor", price: 44.99,
picture: "monitor.png" },
{
title: "Printer", price: 4.00,
picture: "Printer.png" },
];
// Render the books using the
template
$("#widgetsTemplate").tmpl(widgets).appendTo("#widgetsContainer");
function formatPrice(price) {
return"$" + price.toFixed(2);
}
</script>
</body>
</html>
In
above codeyou should notice that the actual template is
included in a script tag with a special MIME type of text/x-jQuery-tmpl:
This
template is displayed for each of the widgets rendered by the template. The
template displays a widgets picture, title, and price.
MIME
type of text/x-jQuery-tmpl is used becausewhen a browser encounters a SCRIPT
tag with an unknown MIME type, it ignores the content of the tag. This is the behaviour
that you want with a template. You don’t want a browser to attempt to parse the
contents of a template because this might cause side effects.
For
example, the template above includes an <img> tag with a src attribute
that points at “${picture}”. You don’t want the browser to attempt to load an
image at the URL “${picture}”. Instead, you want to prevent the browser from
processing the IMG tag until the ${picture} expression is replaced by with the
actual name of an image by the jQuery Templates plugin.
If
you are not worried about browser side-effects then you can wrap a template
inside any HTML tag that you like. For example, the following DIV tag would
also work with the jQuery Templates plugin:
The
expression ${…} is used to display the value of a JavaScript expression within
a template. For example, the expression ${title} is used to display the
value of the widgets title property.
The
template is rendered with the help of the tmpl() method. The following
statement selects the widgetsTemplateand renders an array of widgets using the widgetsTemplate.
The results are appended to a DIV element named widgetsContainerby using the
standard jQuery appendTo() method.
$("#widgetsTemplate").tmpl(widgets).appendTo("#widgetsContainer");
So
this is the introduction for JQuery Template.This is a very simple templating
engine. There are more sophisticated and advanced ones like Handlebars,
Moustache etc. Check them out too. Hope you enjoyed this.
About Author:
Vaibhav Patil is enthusiast .net developer who works as associate consultant with Systems Plus Pvt. Ltd. He in free time reads and write on various web technologies. He can be contacted at: vaibhav.p@spluspl.com
Vaibhav Patil is enthusiast .net developer who works as associate consultant with Systems Plus Pvt. Ltd. He in free time reads and write on various web technologies. He can be contacted at: vaibhav.p@spluspl.com
THANK YOU FOR THE INFORMATION
ReplyDeletePLEASE VISIT US
PPC Services in Bangalore
Thanks for writing this great article! It’s very informative, and you included some great points to the equally great article regarding Outsource Customer Services.
ReplyDeleteThank you to share this great post and your article is too good and informative for me. Keep writing and sharing educational article like this which can help us to grow our knowledge. I think it’s a really creative way to start a post, whether it’s an online article or blog post.
ReplyDelete