Шаблоны jQuery - загрузка другого шаблона в шаблон (составной) - PullRequest
Новая
       15

Шаблоны jQuery - загрузка другого шаблона в шаблон (составной)

1 голос
/ 21 декабря 2010

Я слежу за этой записью Дейва Уорда (http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/)), чтобы загрузить составные шаблоны для блога, где у меня есть всего 3 небольших шаблона (все в одном файле) для записи в блоге. В файле шаблона У меня есть эти 3 шаблона:

  1. blogTemplate , где я отображаю " postTemplate "
  2. Внутри "postTemplate" я хотел бы отобразить другой шаблон, который отображает комментарии, я назвал это " commentsTemplate "
  3. шаблон comments"

Вот структура моих данных 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() ..., но, похоже, ничего не работает. Я не знаю, как перебрать коллекцию Comments и передать этот объект в commentsTemplate .

Есть предложения?

Большое спасибо.

1 Ответ

2 голосов
/ 31 декабря 2010

Похоже, вы имеете в виду 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>
...