Jul 12, 2010 14
jQuery JavaScript Templates Tutorial: Nesting Templates
In my last post, I presented an intro to how to create a template using the new jQuery Template plugin being developed by the Microsoft Ajax Core team. In this tutorial, I’ll show you how to nest templates to have great control over your layout.
The nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let’s start by defining some data:
var clientData = [
{ name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },
{ name: "Mark Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] },
{ name: "Jen Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] }
];
What I’d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.
Like I showed in my previous post, we first create a template for our layout:
<script id="clientTemplate" type="text/html">
<p><a href="clients/${id}">${name} - Age: ${age}</a></p>
</script>
This will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client”
<script id="phoneTemplate" type="text/html">
<ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
</script>
Lastly, we’re going to include the call to “phoneTemplate” in our main template using the “tmpl” tag. This tag is used by the plugin to identify templates and parse them accordingly. Here’s what the call would look like:
{{tmpl($data) "#phoneTemplate"}}
and we’re going to include it into the main template:
<script id="clientTemplate" type="text/html">
<p><a href="clients/${id}">${name} - Age: ${age}</a></p>
{{tmpl($data) "#phoneTemplate"}}
</script>
This will generate the following results:
There are a couple of key things to understand here. First, let’s look at the following:
{{tmpl($data) "#phoneTemplate"}}
The variable “$data” contains the data for the current record being parsed. We’re passing it to the nested template so that we can work with that record. Let’s move onto the nested template:
<script id="phoneTemplate" type="text/html">
<ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
</script>
Now that the current record has been passed to it, we can access the attribute name, in this case “phone”, and loop through each phone record using the ‘{{each}}‘ plugin template tag. Think of it as similar to jQuery’s $.each() method or a JavaScript “for” loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.
Here’s the whole code for you to work with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var clientData = [
{ name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },
{ name: "Mark Goldberg", age: 51, id: 2, phone: ["617-777-1234", "617-222-3333"] },
{ name: "Jen Statford", age: "25", id: 3, phone: ["608-555-5647", "608-645-8855"] }
];
$("#clientTemplate").tmpl(clientData).appendTo("div");
});
</script>
<script id="clientTemplate" type="text/html">
<p><a href="clients/${id}">${name} - Age: ${age}</a></p>
{{tmpl($data) "#phoneTemplate"}}
</script>
<script id="phoneTemplate" type="text/html">
<ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
</script>
</head>
<body>
<div></div>
</body>
</html>
AIM: iamreybango
