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:

1. blogTemplate, where I render the "postTemplate"
2. Inside the "postTemplate", I would like to render another template that displays comments, I called this "commentsTemplate"
3. the "commentsTemplate"

Here's the structure of my json data:

blog
    Title
    Content
    PostedDate
    Comments (a collection of comments)
        CommentContents
        CommentedBy
        CommentedDate

For now, I was able to render the Post content using the code below:

Javascript

$(document).ready(function () {
    $.get('/GetPost', function (data) {
        $.get('/Content/Templates/_postWithComments.tmpl.htm', function (templates) {
            $('body').append(templates);
            $('#blogTemplate').tmpl(data).appendTo('#blogPost');
        });
    });
});

Templates

<!--Blog Container Templates-->
<script id="blogTemplate" type="x-jquery-tmpl">
<div class="latestPost">
    {{tmpl() '#postTemplate'}}
</div>
</script>
<!--Post Item Container-->
<script id="postTemplate" type="x-jquery-tmpl">
<h2>
    ${Title}</h2>
<div class="entryHead">
    Posted in <a class="category" rel="#">Design</a> on ${PostedDateString} <a class="comments"
        rel="#">${NumberOfComments} Comments</a></div>
${Content}
<div class="tags">
    {{if Tags.length}} <strong>Tags:</strong> {{each(i, tag) Tags}} <a class="tag" href="/blog/tags/{{= tag.Name}}">
        {{= tag.Name}}</a> {{/each}} <a class="share" rel="#"><strong>TELL A FRIEND</strong></a>
    <a class="share twitter" rel="#">Twitter</a> <a class="share facebook" rel="#">Facebook</a>
    {{/if}}
</div>
<!-- close .tags -->
<!-- end Entry 01 -->
{{if Comments.length}}
    {{each(i, comment) Comments}}
        {{tmpl() '#commentTemplate'}}
    {{/each}}
{{/if}}
<div class="lineHor">
</div>
</script>
<!--Comment Items Container-->
<script id="commentTemplate" type="x-jquery-tmpl">
<h4>
    Comments</h4>
&nbsp;
<!-- COMMENT -->
<div id="authorComment1">
    <div id="gravatar1" class="grid_2">
        <!--<img src="images/gravatar.png" alt="" />-->
    </div>
    <!-- close #gravatar -->
    <div id="commentText1">
        <span class="replyHead">by<a class="author" rel="#">${= comment.CommentedBy}</a>on today</span>
        <p>
            {{= comment.CommentContents}}</p>
    </div>
    <!-- close #commentText -->
    <div id="quote1">
        <a class="quote" rel="#"><strong>Quote this Comment</strong></a>
    </div>
    <!-- close #quote -->
</div>
<!-- close #authorComment -->
<!-- END COMMENT -->
</script>

Where I'm having problem is at the

{{each(i, comment) Comments}}
        {{tmpl() '#commentTemplate'}}
{{/each}}

Update - Example Json data when GetPost method is called

{
   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"
        }
    ]
}

I've tried passing in {{tmpl(comment) ..., {{tmpl(Comments) ..., or leave {{tmpl() ... but none seems to work. I don't know how to iterate over the Comments collection and pass that object into the commentsTemplate.

Any suggestions?

Thank you very much.