前面在介紹準(zhǔn)備Kendo UI開發(fā)環(huán)境時(shí)我們使用jQuery的方法將一個(gè)HTML元素轉(zhuǎn)換成一個(gè)KendoUI控件： $(?#datepicker?).kendoDatePicker()；除了使用jQuery插件的方法來初始化方法外，每個(gè)Kendo 控件還可以通過data屬性來初始化，此時(shí)你需要設(shè)置data的role屬性，然后調(diào)用kendo.init方法。

 

使用初始化Data屬性的方法在頁面上包含有大量Kendo UI控件時(shí)非常便利。首先， 組件的配置包含在目標(biāo)元素中，第二無需首先查找每個(gè)元素然后調(diào)用jQuery方法，你只需調(diào)用一次kendo.init()方法。

 

 

Kendo UI Mobile應(yīng)用通常使用Data屬性來初始化。如下例使用data 屬性來初始化一個(gè)UI組件：

 

 

其中方法kendo.init($(?#container?)) 會(huì)查找所有包含有data-role屬性的元素，然后初始化這些Kendo UI組件。 每個(gè)kendo UI組件的role的值為該UI組件名稱的小寫名字，比如?autocomplete?或?dropdownlist?。

缺省情況下，kendo.init 只會(huì)初始化KendoUI Web組件和KendoUI DataViz組件（按這個(gè)順序）。而Kendo UI Mobile應(yīng)用 首先初始化Kendo UI Mobile組件，然后是Kendo UI Web組件，最后是Kendo UI DataViz組件。 這意味著data-role=?listview? 在Mobile應(yīng)用中會(huì)缺省初始化為 Kendo UI Mobile Listview。然而可以通過指明組件全稱的方法在修改這個(gè)缺省初始化順序。

比如：在Mobile應(yīng)用中 指明使用Kendo UI Web的listview：

 

 

配置

每個(gè)組件可以通過Data屬性來進(jìn)行配置，對(duì)于配置的屬性，只需在屬性名前加上data-前綴就可以做為目標(biāo)元素的屬性進(jìn)行配置。比如 data-delay=?100?。 對(duì)于一些使用Camel-cased 的屬性則是通過添加“-”，比如AutoComplete的ignoreCase 的屬性可以通過 data-ignore-case來設(shè)置。而對(duì)于一些已經(jīng)是使用data前綴的屬性則無需再添加data-前綴。比如dataTextField屬性可以通過data-text-field屬性來配置,dataSource屬性可以通過data-source屬性來配置。對(duì)于一些復(fù)雜的配置可以通過JavaScript 對(duì)象字面量來配置，比如：data-source=?{data: [{name: ?John Doe?},{name: ?Jane Doe?]}?.

如下例：

 

 

事件

你也可以通過data屬性添加對(duì)Kendo UI組件的事件處理，屬性的值被當(dāng)成一個(gè)JavaScript函數(shù)，其作用域?yàn)槿帧?/span>

如下例：

 

 

事件處理函數(shù)也可以為一個(gè)成員函數(shù)，比如 foo.bar 可以看出為foo 對(duì)象的 bar 方法。例如：

 

 

 

數(shù)據(jù)源

支持?jǐn)?shù)據(jù)綁定的UI組件的數(shù)據(jù)源也可以通過data-source 屬性來指定。 這個(gè)屬性可以為一個(gè)JavaScript對(duì)象，一個(gè)數(shù)組或是一個(gè)全局變量。

例如：使用JavaScript對(duì)象作為數(shù)據(jù)源。

 

 

使用JavaScript數(shù)組作為數(shù)據(jù)源。

 

 

使用一個(gè)可以全局訪問的變量作為數(shù)據(jù)源。

 

模板

模板也可以通過Data屬性來設(shè)置，屬性的值代表用來定義模板的Script元素的Id。比如：