기존 핸드 셀 템플릿의 목록에 항목을 추가하는 방법은 무엇입니까?

Question

기존 핸들 막대 템플릿에 목록을 추가하려고합니다. 아래 코드는 내가 코멘트를 추가 할 수있게하지만 새로운 코멘트가 새로 고침해야 할 기존 코멘트가있는 목록에 나타나기 위해서입니다. 궁금해하는 것은 템플릿의 기존 주석 목록에 새 주석을 추가하는 방법입니다. 전체 템플릿을 포함 시켰지만 새로운 코멘트를 추가하려고하는 곳은 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 파일

<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 
    }));