title: jQuery templates - Load another template within a template (composite)
body: <p>I'm following this post by Dave Ward (http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/) to load a composite templates for a Blog, where I have a total of 3 small templates (all in one file) for a blog post. In the template file, I have these 3 templates:</p>
  
  <ol>
  <li><strong>blogTemplate</strong>, where I render the "<strong>postTemplate</strong>"</li>
  <li>Inside the "postTemplate", I would like to render another template that displays comments, I called this "<strong>commentsTemplate</strong>"</li>
  <li>the "<strong>commentsTemplate</strong>"</li>
  </ol>
  
  <p>Here's the structure of my json data:</p>
  
  <pre><code>blog
      Title
      Content
      PostedDate
      Comments (a collection of comments)
          CommentContents
          CommentedBy
          CommentedDate
  </code></pre>
  
  <p>For now, I was able to render the Post content using the code below:</p>
  
  <p><em><strong>Javascript</em></strong></p>
  
  <pre><code>$(document).ready(function () {
      $.get('/GetPost', function (data) {
          $.get('/Content/Templates/_postWithComments.tmpl.htm', function (templates) {
              $('body').append(templates);
              $('#blogTemplate').tmpl(data).appendTo('#blogPost');
          });
      });
  });
  </code></pre>
  
  <p><em><strong>Templates</em></strong></p>
  
  <pre><code>&lt;!--Blog Container Templates--&gt;
  &lt;script id="blogTemplate" type="x-jquery-tmpl"&gt;
  &lt;div class="latestPost"&gt;
      {{tmpl() '#postTemplate'}}
  &lt;/div&gt;
  &lt;/script&gt;
  &lt;!--Post Item Container--&gt;
  &lt;script id="postTemplate" type="x-jquery-tmpl"&gt;
  &lt;h2&gt;
      ${Title}&lt;/h2&gt;
  &lt;div class="entryHead"&gt;
      Posted in &lt;a class="category" rel="#"&gt;Design&lt;/a&gt; on ${PostedDateString} &lt;a class="comments"
          rel="#"&gt;${NumberOfComments} Comments&lt;/a&gt;&lt;/div&gt;
  ${Content}
  &lt;div class="tags"&gt;
      {{if Tags.length}} &lt;strong&gt;Tags:&lt;/strong&gt; {{each(i, tag) Tags}} &lt;a class="tag" href="/blog/tags/{{= tag.Name}}"&gt;
          {{= tag.Name}}&lt;/a&gt; {{/each}} &lt;a class="share" rel="#"&gt;&lt;strong&gt;TELL A FRIEND&lt;/strong&gt;&lt;/a&gt;
      &lt;a class="share twitter" rel="#"&gt;Twitter&lt;/a&gt; &lt;a class="share facebook" rel="#"&gt;Facebook&lt;/a&gt;
      {{/if}}
  &lt;/div&gt;
  &lt;!-- close .tags --&gt;
  &lt;!-- end Entry 01 --&gt;
  {{if Comments.length}}
      {{each(i, comment) Comments}}
          {{tmpl() '#commentTemplate'}}
      {{/each}}
  {{/if}}
  &lt;div class="lineHor"&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  &lt;!--Comment Items Container--&gt;
  &lt;script id="commentTemplate" type="x-jquery-tmpl"&gt;
  &lt;h4&gt;
      Comments&lt;/h4&gt;
  &amp;nbsp;
  &lt;!-- COMMENT --&gt;
  &lt;div id="authorComment1"&gt;
      &lt;div id="gravatar1" class="grid_2"&gt;
          &lt;!--&lt;img src="images/gravatar.png" alt="" /&gt;--&gt;
      &lt;/div&gt;
      &lt;!-- close #gravatar --&gt;
      &lt;div id="commentText1"&gt;
          &lt;span class="replyHead"&gt;by&lt;a class="author" rel="#"&gt;${= comment.CommentedBy}&lt;/a&gt;on today&lt;/span&gt;
          &lt;p&gt;
              {{= comment.CommentContents}}&lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- close #commentText --&gt;
      &lt;div id="quote1"&gt;
          &lt;a class="quote" rel="#"&gt;&lt;strong&gt;Quote this Comment&lt;/strong&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- close #quote --&gt;
  &lt;/div&gt;
  &lt;!-- close #authorComment --&gt;
  &lt;!-- END COMMENT --&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Where I'm having problem is at the</p>
  
  <pre><code>{{each(i, comment) Comments}}
          {{tmpl() '#commentTemplate'}}
  {{/each}}
  </code></pre>
  
  <p><em><strong>Update - Example Json data when GetPost method is called</em></strong></p>
  
  <pre><code>{
     Id: 1,
     Title: "Test Blog",
     Content: "This is a test post asdf asdf asdf asdf asdf",
     PostedDateString: "2010-12-20",
     - Comments: [
       - {
            Id: 1,
            PostId: 1,
            CommentContents: "Test comments # 1, asdf asdf asdf",
            PostedBy: "User 1",
            CommentedDate: "2010-12-20"
          },
       - {
            Id: 2,
            PostId: 1,
            CommentContents: "Test comments # 2, ghjk gjjk gjkk",
            PostedBy: "User 2",
            CommentedDate: "2010-12-21"
          }
      ]
  }
  </code></pre>
  
  <p>I've tried passing in <code>{{tmpl(comment) ...</code>, <code>{{tmpl(Comments) ...</code>, or leave <code>{{tmpl() ...</code> but none seems to work. I don't know how to iterate over the <strong>Comments</strong> collection and pass that object into the <strong>commentsTemplate</strong>.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thank you very much.</p>