从嵌套的 <ul> 列表项中删除 Table 行

Question

我有一个 html table，里面有一个 <ul>。 table 被 knockout 视图模型绑定。

当我单击 TEST 文本时，我想从 table 中删除单击的 TEST 文本所在的 <tr>。我现在有了它，所以当我单击 REMOVE 时，它会删除 <tr>，但我需要它，所以当我单击 TEST 时，它会删除 <tr>。非常感谢帮助！

FIDDLE 有了它，and/or 请看下面的代码片段。

查看模型

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 link 的数据上下文是 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>

从嵌套的 <ul> 列表项中删除 Table 行

Delete Table Row from nested <ul> list item

html

javascript

knockout.js