jQuery Client Templates
Put simply, the Client Templates library parses templates on the client-side and renders them to the user.
The jQuery Client Templates library is based on John Resig's work, but goes many steps further by simplifying template processing, automatically binding to data, handling template errors, downloading templates via AJAX, pre-caching,
and more.
An example, you ask? Here you go!
Example 1
<html>
<head>
<script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.databinding.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.client-templates.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.setData("People",
[
{ ID: 1, Name: "George Washington" },
{ ID: 2, Name: "Thomas Jefferson" },
{ ID: 3, Name: "Benjamin Franklin" }
]);
});
</script>
<script id="PersonTemplate" type="text/html">
<# if (data) { #>
<# $.each(data, function(i, person) { #>
<div>
<#= person.ID #>: <#= person.Name #>
</div>
<# }); #>
<# } #>
</script>
</head>
<body>
<div template="PersonTemplate" data="People"></div>
</body>
</html>
Moreover, you can store your template in a separate page, and
load it via AJAX. It's as simple as adding templateuri="/path/to/your/template" to
the element being templated.
Example 2
<html>
<head>
<script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.databinding.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.client-templates.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.setData("People",
[
{ ID: 1, Name: "George Washington" },
{ ID: 2, Name: "Thomas Jefferson" },
{ ID: 3, Name: "Benjamin Franklin" }
]);
});
</script>
</head>
<body>
<div template="PersonTemplate" data="People" templateuri="/Person/Template"></div>
</body>
</html>
Download the latest version of the jQuery Client Templates library here.