jQuery templates - Load another template within a template (composite) -

i'm following post dave ward (http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/) load composite templates blog, have total of 3 small templates (all in 1 file) blog post. in template file, have these 3 templates:

1. blogtemplate, render "posttemplate"
2. inside "posttemplate", render template displays comments, called "commentstemplate"
3. the "commentstemplate"

here's structure of json data:

blog     title     content     posteddate     comments (a collection of comments)         commentcontents         commentedby         commenteddate 

for now, able render post content using 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 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 comment</strong></a>     </div>     <!-- close #quote --> </div> <!-- close #authorcomment --> <!-- end comment --> </script> 

where i'm having problem @ the

{{each(i, comment) comments}}         {{tmpl() '#commenttemplate'}} {{/each}} 

update - example json data when getpost method called

{    id: 1,    title: "test blog",    content: "this 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() ... none seems work. don't know how iterate on comments collection , pass object commentstemplate.

any suggestions?

thank much.

it looks you're referring comment within #commenttemplate, within child template, comment this. is, should able refer properties directly if you're passing in comment variable parent template:

<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="#">{{= commentedby}}</a>on today</span>         <p>             {{= commentcontents}}</p>     </div>     <!-- close #commenttext -->     <div id="quote1">         <a class="quote" rel="#"><strong>quote comment</strong></a>     </div>     <!-- close #quote --> </div>