jQuery-Vorlagen - Laden Sie eine andere Vorlage innerhalb einer Vorlage (Composite)

Question

Ich folge diesem Beitrag von Dave Ward (http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote -loading /) um eine zusammengesetzte Vorlage für einen Blog zu laden, wo ich insgesamt 3 kleine Vorlagen (alle in einer Datei) für einen Blogeintrag habe. In der Vorlagendatei, ich habe diese 3-Vorlagen:

1. blogTemplate, wo ich die „postTemplate“
2. Im Inneren des „postTemplate“ machen, würde Ich mag eine andere Vorlage machen, die Kommentare zeigt, ich nannte diese "commentsTemplate"
3. die "commentsTemplate"

Hier ist die Struktur meiner json Daten:

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

Vorerst kann mich unter den Post-Inhalte mit dem Code machen:

Javascript

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

Vorlagen

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

Wo ich habe Problem am

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

Update - Beispiel Json-Daten, wenn getPost Methode

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

ich in {{tmpl(comment) ... vorbei habe versucht, genannt wird, {{tmpl(Comments) ..., oder lassen Sie {{tmpl() ..., aber keine scheint zu funktionieren. Ich weiß nicht, wie man über die Kommentare Sammlung iterieren und das Objekt in die commentsTemplate übergeben.

Irgendwelche Vorschläge?

Vielen Dank.

Answer 1

Es sieht aus, wie Sie sich comment innerhalb #commentTemplate Bezug genommen wird, aber innerhalb dieses Kind Vorlage, comment ist eigentlich this. Das heißt, sollten Sie in der Lage sein, nur um seine Eigenschaften beziehen sich direkt, wenn Sie in der comment Variable aus der übergeordneten Vorlage vorbei sind:

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