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

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 都会触发该事件，并且会向上冒泡)。因此，您多次绑定(bind)更改处理程序。您应该从 initTree 方法绑定(bind)更改事件；片段:

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

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

( updated demo )

或者，您可以使用dataBound事件并检查e.node，它在上次触发dataBound时显然是未定义( demo):

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