Question

我正在关注Dave Ward的这篇文章（http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/）来加载博客的复合模板，我在博客文章中总共有3个小模板（全部在一个文件中）。在模板文件中，我有以下3个模板：

blogTemplate ，我在其中呈现“ postTemplate ”
在“postTemplate”中，我想渲染另一个显示评论的模板，我称之为“ commentsTemplate ”
“ commentsTemplate ”

这是我的json数据的结构：

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

目前，我可以使用以下代码呈现帖子内容：

的的Javascript 的

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

的模板 的

<!--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>

我遇到问题的地方是

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

更新 - 调用GetPost方法时的示例Json数据

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

我已尝试传入{{tmpl(comment) ...，{{tmpl(Comments) ...或离开{{tmpl() ...，但似乎没有效果。我不知道如何迭代评论集合并将该对象传递到 commentsTemplate 。

有什么建议吗？

非常感谢。

Answer 1

您好像是指comment中的#commentTemplate，但在该子模板中，comment实际上是this。也就是说，如果您从父模板传入comment变量，则应该能够直接引用其属性：

<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 this Comment</strong></a>
    </div>
    <!-- close #quote -->
</div>

jQuery模板 - 在模板中加载另一个模板（复合）

1 个答案: