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"等。

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

您可以從混合應(yīng)用程序和給定元素中的數(shù)據(jù)屬性初始化窗口小部件，然后還可以配置data- *選項(xiàng)。 默認(rèn)情況下為避免歧義，kendo.bind僅初始化kendo.ui命名空間中的小部件，不包括混合小部件?？梢酝ㄟ^(guò)將其他名稱(chēng)空間作為參數(shù)傳遞來(lái)更改此操作。請(qǐng)注意混合Kendo UI應(yīng)用程序首先從kendo.mobile.ui命名空間初始化小部件。這意味著具有data-role =“listview”的元素將自動(dòng)初始化為混合應(yīng)用程序上下文中的混合ListView小部件。

注意：data-role屬性還接受完整窗口小部件類(lèi)名稱(chēng)（帶有其名稱(chēng)空間）作為值。

以下示例演示如何使用窗口小部件的完整類(lèi)路徑在混合應(yīng)用程序中實(shí)例化Kendo UI ListView。

在特定元素中初始化

以下示例演示如何在特定元素中實(shí)例化Kendo UI小部件。

設(shè)置數(shù)據(jù)選項(xiàng)

可以使用target元素的data屬性設(shè)置每個(gè)配置選項(xiàng)。將“data-”前綴添加到配置選項(xiàng)的名稱(chēng)并指定選項(xiàng)值 – 例如，data-delay =“100”。

注意：camelCase選項(xiàng)通過(guò)破折號(hào)分隔的屬性設(shè)置。例如，AutoComplete的ignoreCase選項(xiàng)通過(guò)data-ignore-case設(shè)置。

以數(shù)據(jù)開(kāi)頭的選項(xiàng)不需要屬性名稱(chēng)中的附加“數(shù)據(jù)”。例如，dataTextField選項(xiàng)通過(guò)data-text-field屬性設(shè)置，dataSource通過(guò)data-source屬性設(shè)置。 復(fù)雜配置選項(xiàng)設(shè)置為JavaScript對(duì)象文字 – 例如，data-source =“{data：[{name：’John Doe’}，{name：’Jane Doe’}]}”。

以下示例演示如何使用數(shù)據(jù)屬性配置Kendo UI小部件。

訂閱事件

您可以使用數(shù)據(jù)屬性訂閱Kendo UI小部件事件。 data屬性的值被解析為JavaScript函數(shù)，可在全局范圍內(nèi)使用。以下示例演示如何通過(guò)數(shù)據(jù)屬性訂閱KendoUI窗口小部件事件。