剔除删除单击的行

Question

我有一个带有嵌入式表格的 jQuery UI 弹出窗口。用户可以单击弹出窗口底部的“+”号向表中添加一行。每行包含 4 个元素（3 个文本输入和 1 个“删除行”按钮）。添加行很容易，但在将删除按钮的行索引传递给我的“removeRow(index)”函数时，我无法识别它。

这是 HTML

    <table id="item-config-table" class="table table-bordered table-hover table-striped">
        <thead>
            <tr>                    
                <th>Qty</th>
                <th>Description</th>                    
                <th>Part #</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody id="item-config-body">
            <tr>
                <td>
                    <input type="text">
                </td>
                <td>
                    <input type="text">
                </td>
                <td>
                    <input type="text">
                </td>
                <td>
                    //This line is the delete button
                    <a href="#" class="btn btn-default glyphicon glyphicon-minus" style="vertical-align:middle;padding:4px;" data-bind="click: function(data, event) {$root.RemoveConfigRow(data,event,$(this))}"><span style="font-family:'Arial Narrow', Arial, sans-serif; font-weight:bold; vertical-align:central;color:#1F497D;"></span></a>
                </td>
            </tr>
        </tbody>
    </table>

这是我的功能

 RemoveConfigRow = function (data, event, object) {
            var index = object.parent().parent().index();
            var count = $('#item-config-body tr').length;
            if (count > 1)
                document.getElementById('item-config-body').deleteRow(index);
        };

我要做的是将引用传递给当前元素a，然后具有将两个级别备份到tr的功能。从那里我想找到它在正文中的索引以将其删除。

调用函数时传递了一个对象，但其中的数据似乎与单击的链接元素没有任何联系。随后在 object 上调用 .parent().parent().index() 会返回 -1。我的猜测是“this”绑定在传递给函数时会绑定到其他东西。

这篇文章让我非常接近，但他传递的是硬编码参数，而不是使用关键字“this” Knockout firing click binding on applyBindings

Answer 1

不要这样做：

document.getElementById('item-config-body').deleteRow(index);

如果您想进行 DOM 操作，请不要使用 Knockout。您与 Knockout 的约定是您将控制 ViewModel，而 Knockout 将控制 DOM。

在 Knockout 中，您的问题归结为添加和删除 ObservableArray 的元素。

uid=1;

vm = {
  arr: ko.observableArray(),
  remove: function(data) {
    vm.arr.remove(data);
  },
  add: function() {
    vm.arr.push(uid++);
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: arr">
    <tr>
      <td data-bind="text:$data"></td>
      <td>
        <button data-bind="click:$parent.remove">Remove</button>
      </td>
    </tr>

  </tbody>
</table>
<button data-bind="click: add">Add</button>