javascript - 从嵌套 <ul> 列表项中删除表行

Question

我有一个 html 表，其中包含 <ul>在里面。该表由 knockout View 模型绑定(bind)。

当我点击TEST时我想删除 <tr> 文本单击的测试文本位于 table 。我现在有了它，所以当我点击 REMOVE 时它删除了 <tr>但我需要它，所以当我单击 TEST 时它删除了 <tr> 。非常感谢您的帮助!

FIDDLE与它，和/或查看下面的代码片段。

查看模型

var rowModel = function(id, list) {
  this.uid = ko.observable(id);
  this.myList = ko.observableArray(list);
};

function myViewModel() {
  var self = this;
  self.myArr = ko.observableArray([
    new rowModel(1, ["str1", "str2", "str3"]),
    new rowModel(2, ["str1", "str2"]),
    new rowModel(3, ["str1"])
  ]);

  //this.myList = ko.observableArray();

  self.removeItem = function(rowItem) {
    self.myArr.remove(rowItem);

  }
}

ko.applyBindings(new myViewModel());

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
  </thead>
  <tbody data-bind="foreach: myArr">
    <tr>
      <td data-bind="text: uid"></td>
      <td>
        <ul data-bind="foreach: myList">
          <li><span data-bind="text: $data"></span>  <a href="#" data-bind="click: $parents[1].removeItem">TEST</a>
          </li>
        </ul>
      </td>
      <td><a href="#" data-bind="click: $root.removeItem">REMOVE</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

问题在于 TEST 链接的数据上下文是 myList 项，而不是 myArr 项。您的 removeItem() 函数需要一个 myList 项。您需要从(在本例中)父上下文传递数据。您可以使用 $parentContext.$data 或简单地使用 $parent。

<ul data-bind="foreach: myList">
    <li>
        <span data-bind="text: $data"></span>
        <a href="#" data-bind="click: function () { $root.removeItem($parent); }">TEST</a>
    </li>
</ul>