Question

我有一个带有嵌入式表的jQuery UI弹出窗口。用户可以点击＆＃34; +＆＃34;在弹出窗口底部签名，向表中添加一行。每行包含4个元素（3个文本输入＆amp; 1＆＃34;删除行＆＃34;按钮）。添加行很容易，但是在将删除按钮的行索引传递给我的＆＃34; removeRow（index）＆＃34;时，我很难识别它们的行索引。功能

这是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 两个级别。从那里我想在身体中找到它的索引来移除它。

当调用该函数时，会传递一个对象，但其中的数据似乎与所单击的链接元素没有任何联系。随后在对象上调用 .parent（）。parent（）。index（）会返回 -1 。我的猜测是＆＃34;这个＆＃34;绑定在传递给函数时绑定到其他东西。

这篇文章让我非常接近，但是他传递的是硬编码参数而没有使用关键字＆＃39;这个＆＃39; 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>

Knockout删除单击的行

1 个答案: