Kendo UI for jQuery使用教程：销毁小部件

本教程主要为介绍如何使用Kendo UI小部件都提供destroy方法。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，欢迎大家免费下载最新试用版！

【Kendo UI for jQuery最新试用版下载】

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

所有Kendo UI小部件都提供destroy方法。

destroy方法：

• 删除窗口小部件实例（客户端对象）。 因此窗口小部件不再可访问，并且其所有事件处理程序都停止工作。
• 删除自动生成的HTML内容，该内容位于窗口小部件之外 – 例如，分离的弹出窗口和下拉列表。窗口小部件的主要HTML保持不变，如果需要，您必须手动将其从DOM中删除。 Window小部件是一个例外，因为它自己代表一个分离的弹出窗口。
• 借助kendo.destroy（）方法销毁所有子窗口小部件。

Kendo UI提供以下用于销毁小部件的选项：

• 手动销毁小部件
• 自动销毁小部件
• 销毁通过MVVM模式创建的小部件
• 销毁多个小部件

手动销毁小部件

您可能需要在以下可能的情况下手动销毁小部件：

• 不再需要小部件。
• 该小部件放置在容器内，该容器将通过Ajax请求或DOM替换进行更新。 在这种情况下，强烈建议销毁嵌套小部件以防止内存泄漏或其他意外的副作用。
• 必须彻底更改窗口小部件设置和操作，这是通过可用的API方法无法实现的。

注意：避免从被破坏的小部件的剩余部分创建新的小部件实例。 要初始化新窗口小部件，请使用不同的新添加的DOM元素。 在某些情况下，还可以清空窗口小部件容器并从空元素初始化新实例。

以下示例演示如何销毁和删除Kendo UI Grid小部件。

<div id="grid"></div><script>  $("#grid").kendoGrid( { /* configuration */ } ); // Create a Grid widget.$("#grid").data("kendoGrid").destroy(); // Destroy the Grid.$("#grid").empty(); // Empty the Grid content (inner HTML)  // or  $("#grid").remove(); // remove all Grid HTML.  </script>

自动销毁小部件

卸载 页时会自动销毁Kendo UI小部件。

销毁MVVM创建的小部件

要正确销毁通过Kendo UI MVVM机制声明性创建的小部件：

1. 使用kendo.unbind（）方法删除与窗口小部件相关的任何MVVM绑定。
2. 为相应的容器调用kendo.destroy（），或者在此容器内调用每个窗口小部件的destroy（）方法。

销毁多个小部件

除了销毁特定的Kendo UI小部件之外，Kendo UI框架还提供了一个kendo.destroy（）方法，该方法可以销毁放置在特定容器内的多个小部件。