Javascript 如何将项目附加到现有handelbar模板中的列表中？

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

 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文件中的把手模板

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

{{image\u set.voting\u criteria}
{{{#每个图像集合.images}
{{/每个}}

{{{#每个图像_set.comments}
{{this.body}}
{{/每个}}

创建注释

将注释模板移出，作为单独的模板

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

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