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