Question

我有一个html表，里面有<ul>。该表受到淘汰视图模型的约束。

当我点击TEST文字时，我想从<tr>删除点击的TEST文字所在的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>

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

1 个答案: