把手Js附加动态渲染模板

Question

我正在尝试动态地将文本附加到已经呈现的Handlebars页面，因此我不想重新加载整个页面：

<script id="post-template" type="text/x-handlebars-template">
{{#each blogPost}}
         <article>
             <h1 class="blog-post-title">{{title}}</h1>
               <div class="blog-post-info">
                 <p class="blog-post-text">{{{post}}}</p>
               </div>
          {{> comments}}
        </article>
{{/each}}
</script>
<script id="comment-template" type="text/x-handlebars-template">
{{#if comments}}
    <p class="lead">Comments</p>
        {{#each comments}}
            <div class="comment-info">
                <span>By: {{name}}</span> 
                <time>Time: {{time}}</time>
            </div>
            <p>{{body}}</p>
            <hr>
        {{/each}}
{{/if}}
</script>

所以，每次有人添加评论时，我都希望加载这个。这是我的js：

这会呈现页面：

$.get('/render-post', function(data){
    var source = $("#post-template").html();
    var template = Handlebars.compile(source);
    $('.posts').html(template({blogPost : data}));
});

这就是我在评论时要做的事情：

$.post('/add-comment', commentData, function(data){
            if(data){
                var source = $("#comment-partial").html();
                var template = Handlebars.compile(source);
                console.log(template({blogPost : data}));
                $('.posts').append(template({blogPost : data}));
            }
        });

感谢您提供任何帮助。