<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]

This will generate the following results:

<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>

There are a couple of key things to understand here. First, let's look at the following:

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

The variable "$data" is an object containing 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:

[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]

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 '<em>{{each}}</em>' 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.

[code language="html"]
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt; 
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; 
  &lt;title&gt;Template Test&lt;/title&gt; 
  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
  &lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {

        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;617-777-1234&quot;, &quot;617-222-3333&quot;] },
	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }
        ];

        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);

});
  &lt;/script&gt;

&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;

&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;
  
&lt;/head&gt; 
 
&lt;body&gt; 

&lt;div&gt;&lt;/div&gt;

&lt;/body&gt; 
&lt;/html&gt; 
[/code]


