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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。
所有Kendo UI小部件都提供destroy方法。
destroy方法:
- 刪除窗口小部件實(shí)例(客戶端對象)。 因此窗口小部件不再可訪問,并且其所有事件處理程序都停止工作。
- 刪除自動生成的HTML內(nèi)容,該內(nèi)容位于窗口小部件之外 - 例如,分離的彈出窗口和下拉列表。窗口小部件的主要HTML保持不變,如果需要,您必須手動將其從DOM中刪除。 Window小部件是一個例外,因?yàn)樗约捍硪粋€分離的彈出窗口。
- 借助kendo.destroy()方法銷毀所有子窗口小部件。
Kendo UI提供以下用于銷毀小部件的選項(xiàng):
- 手動銷毀小部件
- 自動銷毀小部件
- 銷毀通過MVVM模式創(chuàng)建的小部件
- 銷毀多個小部件
手動銷毀小部件
您可能需要在以下可能的情況下手動銷毀小部件:
- 不再需要小部件。
- 該小部件放置在容器內(nèi),該容器將通過Ajax請求或DOM替換進(jìn)行更新。 在這種情況下,強(qiáng)烈建議銷毀嵌套小部件以防止內(nèi)存泄漏或其他意外的副作用。
- 必須徹底更改窗口小部件設(shè)置和操作,這是通過可用的API方法無法實(shí)現(xiàn)的。
注意:避免從被破壞的小部件的剩余部分創(chuàng)建新的小部件實(shí)例。 要初始化新窗口小部件,請使用不同的新添加的DOM元素。 在某些情況下,還可以清空窗口小部件容器并從空元素初始化新實(shí)例。
以下示例演示如何銷毀和刪除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機(jī)制聲明性創(chuàng)建的小部件:
- 使用kendo.unbind()方法刪除與窗口小部件相關(guān)的任何MVVM綁定。
- 為相應(yīng)的容器調(diào)用kendo.destroy(),或者在此容器內(nèi)調(diào)用每個窗口小部件的destroy()方法。
銷毀多個小部件
除了銷毀特定的Kendo UI小部件之外,Kendo UI框架還提供了一個kendo.destroy()方法,該方法可以銷毀放置在特定容器內(nèi)的多個小部件。
Kendo UI R2 2019 SP1全新發(fā)布,最新動態(tài)請持續(xù)關(guān)注Telerik中文網(wǎng)!
掃描關(guān)注慧聚IT微信公眾號,及時獲取最新動態(tài)及最新資訊