1

Dave Ward（http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/）によるこの投稿をフォローして、ブログの複合テンプレートをロードしています。ブログ投稿用に合計3つの小さなテンプレート（すべて1つのファイルに）があります。テンプレートファイルには、次の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}}

更新-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() ...が、どれも機能しないようです。Commentsコレクションを繰り返し処理し、そのオブジェクトをcommentsTemplateに渡す方法がわかりません。

助言がありますか？

どうもありがとうございます。

4

1 に答える 1

2

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>
于 2010-12-30T21:27:30.327 に答える