Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

 

 

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

destroy方法：

• 刪除窗口小部件實例（客戶端對象）。 因此窗口小部件不再可訪問，并且其所有事件處理程序都停止工作。

• 刪除自動生成的HTML內(nèi)容，該內(nèi)容位于窗口小部件之外 – 例如，分離的彈出窗口和下拉列表。窗口小部件的主要HTML保持不變，如果需要，您必須手動將其從DOM中刪除。 Window小部件是一個例外，因為它自己代表一個分離的彈出窗口。

• 借助kendo.destroy（）方法銷毀所有子窗口小部件。

• Kendo UI提供以下用于銷毀小部件的選項：

• 手動銷毀小部件

• 自動銷毀小部件

• 銷毀通過MVVM模式創(chuàng)建的小部件

• 銷毀多個小部件

 

手動銷毀小部件

您可能需要在以下可能的情況下手動銷毀小部件：

• 不再需要小部件。

• 該小部件放置在容器內(nèi)，該容器將通過Ajax請求或DOM替換進行更新。在這種情況下，強烈建議銷毀嵌套小部件以防止內(nèi)存泄漏或其他意外的副作用。

• 必須徹底更改窗口小部件設(shè)置和操作，這是通過可用的API方法無法實現(xiàn)的。

注意：避免從被破壞的小部件的剩余部分創(chuàng)建新的小部件實例。 要初始化新窗口小部件，請使用不同的新添加的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>

 

自動銷毀小部件

卸載網(wǎng)頁時會自動銷毀Kendo UI小部件。

 

銷毀MVVM創(chuàng)建的小部件

要正確銷毀通過Kendo UI MVVM機制聲明性創(chuàng)建的小部件：

1. 使用kendo.unbind（）方法刪除與窗口小部件相關(guān)的任何MVVM綁定。
2. 為相應(yīng)的容器調(diào)用kendo.destroy（），或者在此容器內(nèi)調(diào)用每個窗口小部件的destroy（）方法。

 

銷毀多個小部件

除了銷毀特定的Kendo UI小部件之外，Kendo UI框架還提供了一個kendo.destroy（）方法，該方法可以銷毀放置在特定容器內(nèi)的多個小部件。