Knockout JS:在foreach绑定中添加表单
Knockout JS:在foreach绑定中添加表单
提问于 2018-12-14 04:55:13
我想在使用knockout的foreach绑定生成的每个评论旁边添加一个“删除评论”按钮作为表单，它会触发ajax请求。comments是一个可观察的数组，每个注释都是一个包含username、text、timestamp和commentID成员的对象。在不使用<form>元素的情况下加载以下内容可以很好地工作：
<ul data-bind="foreach: comments">
<li>
<span data-bind="text: username"></span>
<ul>
<li data-bind="text: text"></li>
<li data-bind="text: timestamp"></li>
<form data-bind="if: sameUser" method="post" action="deleteComment.php">
<input data-bind="attr: {id: commentID}, click: deleteComment" type="submit" value="Delete comment">
</form>
</ul>
</li>
</ul>但是，如果包含<form>元素会中断foreach循环，则只会加载一个注释。
我想使用if: sameUser数据绑定，以便delete按钮只对发表评论的用户可见，并使用attr: {id: commentID}数据绑定在按钮被单击时将要删除的正确评论ID发送到服务器，但现在我主要关心的是首先加载表单/按钮。
正确的做法是什么呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-14 05:09:40
不确定你是在注释级还是在列表级编写delete函数，但如果要绑定该函数，请使用$parent来退出foreach上下文。
以下是工作示例
function viewModel() {
var self = this;
self.comments = ko.observableArray([]);
self.isDataLoaded = ko.observable(false);
self.loadData = function(){
setTimeout(function(){
self.comments.push({username:"A", sameUser:true, commentID:1, text:"This is comment from A"});
self.comments.push({username:"B", sameUser:true, commentID:2, text:"This is comment from B"});
self.comments.push({username:"C", sameUser:false, commentID:3, text:"This is comment from C"});
self.comments.push({username:"D", sameUser:true, commentID:4, text:"This is comment from D"});
self.isDataLoaded(true);
}, 2000);
}
self.deleteComment = function(data){
self.comments.remove(data);
}
}
var vm = new viewModel();
vm.loadData();
ko.applyBindings(vm);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-bind="foreach: comments">
<li>
<span data-bind="text: username"></span>
<ul>
<li data-bind="text: text"></li>
<!--<li data-bind="text: timestamp"></li> -->
<form data-bind="if: sameUser" method="post">
<input data-bind="attr: {id: commentID}, click: $parent.deleteComment" type="submit" value="Delete comment">
</form>
</ul>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53769934
复制相关文章
相似问题
腾讯云开发者
