在 Knockout Foreach 中单击绑定自动执行

【问题标题】：Click bind executing automatically in Knockout Foreach在 Knockout Foreach 中单击绑定自动执行
【发布时间】：2016-09-21 18:54:55
【问题描述】：

我在 foreach 循环中包含一键绑定，如下所示：

    <tbody data-bind="foreach: locationConfigSet">
         <tr>
          <td data-bind="text: address"></td>
          <td><a data-bind="attr: {href: 'http://maps.google.com/maps?z=12&t=m&q=loc:' + latitude + '+' + longitude}" target="_blank" class="btn btn-primary btn-xs">Map</a></td>
          <td data-bind="text: allowance"></td>
          <td><button class="btn btn-danger btn-xs" data-bind="click: $parent.deleteconfig($data)">Delete</button></td>
         </tr>
    </tbody>

但是一旦页面在循环中加载（没有点击），函数 deleteconfig 就会被执行，直到它的执行时间与 foreach 循环执行的时间完全相同。

【问题讨论】：

标签： javascript jquery knockout.js foreach click

【解决方案1】：

确实，你需要绑定函数。

data-bind="click: $parent.deleteconfig($data)"

直接调用函数。

您可以改为使用：

data-bind="click: $parent.deleteconfig.bind($parent, $data)"

解释here

看到这个sn-p：

var elementVM = function(id) {
  this.id = ko.observable(id);
}

var parentVM = function() {
  this.list = ko.observableArray([new elementVM(0), new elementVM(1)]);
  this.onclick = function(text) {
    text(text() + 1);
  }
}

ko.applyBindings(new parentVM());

.child {
  width: 50px;
  text-align: center;
  border: 1px solid black;
  background-color: yellow;
  cursor: pointer;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: list">
  <div class="child" data-bind="click: $parent.onclick.bind($parent, $data.id), text: id"></div>
</div>

【讨论】：