javascript - 如何将项目附加到现有 Handlebars 模板中的列表？

Question

我正在尝试在现有 Handlebars 模板中附加一个列表。下面的代码允许我添加评论，但为了使新评论与现有评论一起出现在列表中，我需要刷新。我想知道如何将新评论附加到模板中现有的评论列表中。我已经包含了整个模板，但我尝试添加新评论的地方是 id 为 bodyOfComments 的 ul。谢谢您的帮助。

 var comment_post = function() {

    // console.log($(this).attr("data-id"))
    $.ajax({
        url: 'http://localhost:3000/comments',     
        type: 'POST',
        data: {comment: {
            body: $('#content').find('input[name="createComment"]').val(),
            user_id: 1,
            image_set_id: $(this).attr("data-id")}
        }
    }).done(function(response) {
        console.log(response);
        var template = Handlebars.compile($('#imageSetTemplate').html());
          $('#bodyOfComments').append(template({
            comment: response
        }));

    });
};
$(document).ready(function () {
  $('#content').on('click', '#submitComment', comment_post)
});

下面的代码是html文件中的 Handlebars 模板

<script id="imageSetTemplate" type="text/x-handlebars-template">

    <h1>{{image_set.voting_criteria}}</h1>


    <div class="continer">
      <div class="row">
        {{#each image_set.images}}
        <div class = "col-xs-4"><img src={{this.image_url}}></div>
        {{/each}}
      </div>
    </div>

    <ul id="bodyOfComments">
      {{#each image_set.comments}}
        <li> {{this.body}} </li>
      {{/each}}
    </ul>

    <button type="submit" id="submitComment" data-id={{image_set.id}}>Create Comment</button>
    <input name="createComment" id="commentBody">




</script>

Answer 1

将评论模板移出作为单独的模板。

<script id="commentsTemplate" type="text/x-handlebars-template">
    {{#comments}}
      <li> {{.}} </li>
    {{/comments}}
</script>

然后您可以按如下方式附加。

var template = Handlebars.compile($('#commentsTemplate').html());
  $('#bodyOfComments').append(template({
    comments: response
  }));