Angular - 剑道树视图复选框更改事件多次触发

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 方法绑定更改事件； sn-p：

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();
    }
}