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

您可以通過(guò)數(shù)據(jù)屬性或基于自定義HTML屬性初始化和配置每個(gè)Kendo UI小部件。

Kendo UI混合應(yīng)用程序、單頁(yè)面應(yīng)用程序（SPA）視圖組件和模型視圖視圖模型（MVVM）kendo.bind方法使用聲明性方法自動(dòng)實(shí)例化現(xiàn)有DOM元素中的多個(gè)小部件。

 

 

使用數(shù)據(jù)屬性

當(dāng)頁(yè)面上有許多Kendo UI小部件時(shí)，從數(shù)據(jù)屬性初始化很方便，因?yàn)樾〔考渲檬窃谀繕?biāo)元素中聲明的。

以下示例演示如何使用數(shù)據(jù)屬性初始化Kendo UI窗口小部件。 kendo.bind（$（“＃container”））語(yǔ)句查找具有角色數(shù)據(jù)屬性的所有元素，并初始化相應(yīng)的Kendo UI小部件。

注意：角色數(shù)據(jù)屬性的值是窗口小部件的小寫(xiě)名稱(chēng) – "autocomplete"、"dropdownlist"等。

 

設(shè)置事件處理程序

您還可以將事件處理程序設(shè)置為成員函數(shù)。例如，可以將事件數(shù)據(jù)屬性設(shè)置為foo.bar，將其解析為全局范圍中可用的foo對(duì)象的bar方法。

 

 

以下示例演示如何將成員函數(shù)用作事件處理程序。

 

設(shè)置數(shù)據(jù)源

數(shù)據(jù)綁定的Kendo UI小部件的數(shù)據(jù)源也可以通過(guò)數(shù)據(jù)屬性進(jìn)行設(shè)置。該值可以是JavaScript對(duì)象、數(shù)組或全局范圍中可用的變量。

以下示例演示如何將Kendo UI窗口小部件的數(shù)據(jù)源設(shè)置為JavaScript對(duì)象。

 

 

以下示例演示如何將Kendo UI窗口小部件的數(shù)據(jù)源設(shè)置為JavaScript數(shù)組。

 

 

以下示例演示如何將Kendo UI窗口小部件的數(shù)據(jù)源設(shè)置為全局范圍中可用的變量。

 

 

 

使用模板

通過(guò)使用數(shù)據(jù)屬性，您還可以設(shè)置模板配置。屬性值被解析為具有模板內(nèi)容的腳本元素的id屬性。

以下示例演示如何設(shè)置Kendo UI窗口小部件的模板。

 

 

使用標(biāo)記

您可以通過(guò)以下任何方式基于自定義HTML屬性初始化窗口小部件：

• View和移動(dòng)應(yīng)用程序根據(jù)角色HTML5數(shù)據(jù)屬性實(shí)例化小部件，兩者都在內(nèi)部使用MVVM。

• kendo.bind方法掃描傳遞的DOM元素內(nèi)容來(lái)獲取數(shù)據(jù)角色屬性并實(shí)例化相應(yīng)的小部件。

• Kendo UI AngularJS指令支持基于自定義元素屬性或自定義標(biāo)記名稱(chēng)的聲明性初始化。

雖然理論上可以通過(guò)jQuery插件語(yǔ)法從同一DOM元素初始化幾個(gè)不同的Kendo UI小部件，但是標(biāo)記的聲明性初始化不支持它。

注意：

• 數(shù)據(jù)屬性初始化不是為與Kendo UI服務(wù)器封裝器組合而設(shè)計(jì)的。
• 封裝器的使用等同于jQuery插件語(yǔ)法初始化。
• 要通過(guò)MVVM或AngularJS機(jī)制創(chuàng)建Kendo
• UI小部件實(shí)例，請(qǐng)不要對(duì)這些實(shí)例使用服務(wù)器封裝器。

• 從HTML元素初始化Kendo
• UI小部件，這些元素是DOM樹(shù)的一部分。
• 從文檔片段創(chuàng)建小部件可能會(huì)導(dǎo)致意外的副作用或?qū)е翵avaScript錯(cuò)誤。

 

在SPA視圖中初始化

以下示例引用模板中帶有AutoComplete小部件的（SPA）視圖。

 

在MVVM中初始化

以下示例引用帶有AutoComplete小部件的MVVM綁定DOM元素。

注意：數(shù)據(jù)綁定屬性語(yǔ)法在窗口小部件選項(xiàng)（在本例中為數(shù)據(jù)源）和視圖模型字段（源）之間建立雙向綁定。

 

 

 

在混合UI應(yīng)用程序中初始化

以下示例引用具有View和AutoComplete小部件的Kendo UI混合應(yīng)用程序。