既存のハンドルバーテンプレートにリストを追加しようとしています。以下のコードではコメントを追加できますが、新しいコメントを既存のコメントとともにリストに表示するには、更新する必要があります。私が疑問に思っているのは、テンプレートの既存のコメントリストに新しいコメントを追加する方法です。テンプレート全体を含めましたが、新しいコメントを追加しようとしている場所は、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>
コメントテンプレートを別のテンプレートに移動します。
<script id="commentsTemplate" type="text/x-handlebars-template">
{{#comments}}
<li> {{.}} </li>
{{/comments}}
</script>
次に、次のように追加できます。
var template = Handlebars.compile($('#commentsTemplate').html());
$('#bodyOfComments').append(template({
comments: response
}));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加