时间戳

首页 > 解决方案 > Knockout JS：在 foreach 绑定中添加表单

javascript - Knockout JS：在 foreach 绑定中添加表单

问题描述

我想添加一个“删除评论”按钮作为一种表单，该表单在使用淘汰赛的 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数据绑定，以便删除按钮仅对发布评论的用户可见，并且 attr: {id: commentID}数据绑定发送正确的评论 ID 以在单击按钮时删除到服务器，但现在我的主要关注的是首先加载表单/按钮。

解决这个问题的正确方法是什么？

标签： javascripthtmlknockout.js

解决方案

不确定您是在评论级别或其列表级别编写删除函数，但如果正在绑定该函数，请使用$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>

推荐阅读