In .Net and jQuery, templates are nothing but specification of a format/structure in which the associated data need to be represented. Developers who worked with ASP.NET controls like GiridView, ListView, Repeater... would have felt the power of templates already. To achieve the power of templates in client side jQuery templates comes in a handy form.
It is easy to understand the core idea on the implementation of jQuery templates with the snippet in this post. To understand the complete details on jQuery template please visit here. Now I'll provide snippet which helps you to understand how to use the jQuery templates.
Snippet 1(General html snippet describing the core jQuery template implementation)
<!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>jQuery template core implementation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script id="memberDetailsTemplate" type="text/html">
<tr>
<td>
${MemberName}
</td>
<td>
${Designation}
</td>
</tr>
</script>
<script type="text/javascript">
function applyTemplate() {
var memberData = [
{ MemberName: "Member1", Designation: "Project Lead" },
{ MemberName: "Member2", Designation: "Tech Lead"}];
$('#memberDetailsTemplate').tmpl(memberData).appendTo('#memberDetails');
}
$(document).ready(function () {
applyTemplate();
});
</script>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="5">
<thead>
<tr style="font-weight:bold;">
<td>
Member Name
</td>
<td>
Designation
</td>
</tr>
</thead>
<tbody id="memberDetails">
</tbody>
</table>
</body>
</html>
$('#memberDetailsTemplate').tmpl(memberData).appendTo('#memberDetails'); is the key statement that applies the template. Remaining are self explanatory. If the bound data is an array of object, then the template will be repeated for each item in the array.
Three basic items required for applying jQuery template:
- template : Selector that specifies the template. $('#memberDetailsTemplate') in our case.
- data : Data to which the template need to be applied. memberData in our case.
- target : Selector that specifies the target element. ('#memberDetails') in our case.
.tmpl() is the method that help us achieving the template applied to the data. .appendTo() is one of the method that can be used in conjunction with the object(jQuery collection) returned from .tmpl().
So the statement specifies apply template $('#memberDetailsTemplate') over the data memberData and append the resultant to the ('#memberDetails').
Also, I've used the ${} template tag to read the value of the relevant property. Apart from this, there exists other template tags like {{if}}, {{else}}, {{each}}, {{html}}, {{tmpl}}, {{wrap}}. More details on those template tags can be got from http://api.jquery.com/category/plugins/templates/. We can also create named templates using .template() which you'll find helpful when using more number of templates frequently.
In this post, we just had an introduction for understanding the core idea behind jQuery templates. Part 2 focuses our topic of implementing the jQuery templates using ASP.NET MVC 3.
References
http://api.jquery.com/category/plugins/templates/
References
http://api.jquery.com/category/plugins/templates/
nice jquery thanks
ReplyDelete