Featured post
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:
- blogtemplate, render "posttemplate"
- inside "posttemplate", render template displays comments, called "commentstemplate"
- 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> <!-- 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> <!-- 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>
- Get link
- X
- Other Apps
Comments
Post a Comment