<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn't want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.

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:

[code language="js"]
       var clientData = [
	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },
	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },
	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }
        ];
[/code]

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:

[code language="js"]
&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;
	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;
&lt;/script&gt;
[/code]

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"

[code language="js"]
&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;
	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;
&lt;/script&gt;
[/code]

Lastly, we're going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here's what the call would look like:

[code language="js"]
{{tmpl($data) &quot;#phoneTemplate&quot;}}
[/code]

and we're going to include it into the main template:

[code language="js"]
&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;
	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;
{{tmpl($data) &quot;#phoneTemplate&quot;}}
&lt;/script&gt;
[/code]