Question

我正在尝试使用angular实现复选框更改事件，但在单击复选框时会看到多次触发事件。

我为此创建了plnkr，请帮忙。理想情况下，它应该只被触发一次。

$scope.treeOptions = {
  checkboxes: {
    checkChildren: true
  },
  dataBound: function(e) {
    $scope.attachChangeEvent(e);

  }

};

事件更改代码：

 $scope.attachChangeEvent = function(e) {

  var dataSource = e.sender.dataSource;
  // issue : change event is getting called multiple times for every click on checkbox
  dataSource.bind("change", function(e) {
    var selectedNodes = 0;

    var checkedNodes = [];

    $scope.checkedNodeIds(dataSource.view(), checkedNodes);


    for (var i = 0; i < checkedNodes.length; i++) {
      var nd = checkedNodes[i];
      if (nd.checked) {
        selectedNodes++;
      }
    }
    // check the console - this is called multiple times for one checkbox click
    console.log(selectedNodes);
  });
};

是否还有另一个要附加的事件，以便在更新所有复选框后仅触发一个事件？或者也许有一种方法可以将所有这些“变化”事件分组，而只是激活一个？

Answer 1

dataBound事件被多次触发，因为您正在处理分层数据源（每个子DS触发事件，并且它会冒泡）。因此，您多次绑定更改处理程序。您应该从initTree方法绑定更改事件;片段：

var knobj = new kendo.data.HierarchicalDataSource({
    data: arrayObj
});

//setting heirarchial data to scope
$scope.treeObj = knobj;
$scope.attachChangeEvent();

（updated demo）

或者，您可以使用dataBound事件并检查e.node，这显然是undefined，最后一次触发dataBound（demo）：

dataBound: function(e) {
    if (!e.node) {
        $scope.attachChangeEvent();
    }
}

Angular - Kendo treeview复选框更改事件多次触发

1 个答案: