javascript - 为什么 Kendo UI destroy 方法会删除所有子部件？

Question

我使用 kendo UI 分割器将屏幕分为 2 个分割区域。现在每个分割区域又被分割了很多次。

在某些用例中，我想销毁父拆分器但保留其子拆分器。

//get the splitter object of kendo
  var splitter = $splittedDiv.data("kendoSplitter");
  splitter.destroy();

但是 kendo 正在递归地销毁其所有子部件。我们有解决方法吗？

基本上，我也尝试过使用 splitter.remove()，但这不会从拆分栏中删除“调整大小”事件，当我尝试调整所有拆分小部件的大小时，这会导致问题。

我们是否有任何解决方法可以使用 kendo.destroy() 但它只会销毁该特定小部件而不触及其任何子小部件。

<div id="container1">
 <div id="splitA">
 </div>
 <div id="splitB">
   <div id="container2">
     <div id="splitC"></div>
     <div id="splitD"></div>
   </div>
 </div>
</div>


 Now init 
 $('#container1').kendoSplitter();
 $('#container2').kendoSplitter();

 Not destroy
 $('#container1').data("kendoSplitter").destroy();

上面的代码还破坏了#container2分割区域。为什么？

Answer 1

这就是 destroy 方法的预期行为。

您可以添加自己的销毁方法，该方法不会调用kendo.destroy()(它负责销毁子窗口小部件)，而是调用它:

kendo.ui.Splitter.fn.destroyNonRecursive = function() {
    Widget.fn.destroy.call(this);

    this._detachEvents();

    if (this.resizing) {
        this.resizing.destroy();
    }
}