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

Question

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

1. blogTemplate，我在那里呈现“postTemplate”
2. 里面的“postTemplate”，我想渲染显示注释的另一模板，我称之为 “commentsTemplate”
3. 的 “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}} 

更新 - 示例JSON数据时的getPost方法被调用

{ 
    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() ...但似乎没有工作。我不知道如何遍历评论集合并将该对象传递到评论模板。

有什么建议吗？

非常感谢。

Answer 1

看起来您指的是#commentTemplate中的comment，但在该子模板中，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>