jQuery templates - Load another template within a template (composite)
- by Saxman
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:
blogTemplate, where I render the "postTemplate"
Inside the "postTemplate", I would like to render another template that displays comments, I called this "commentsTemplate"
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>
<!-- 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.
