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

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

Kendo UI Mobile應用通常使用Data屬性來初始化。如下例使用data 屬性來初始化一個UI組件：

<div id=“container”>
<input data-role=“numerictextbox” />
</div>
<script>
kendo.init($(“#container”));
</script>

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

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

比如：在Mobile應用中 指明使用Kendo UI Web的listview：

<div data-role=“view”>
<!– specify the Kendo UI Web ListView widget –>
<div data-role=“kendo.ui.ListView”></div>
</div>
<script>
var app = new kendo.mobile.Application();
</script>

配置

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

如下例：

<div id=“container”>
<input data-role=“autocomplete”
data-ignore-case=“true”
data-text-field=“name”
data-source=“{data: [{name: ‘John Doe’},{name: ‘Jane Doe’}]}”
/>
</div>
<script>
kendo.init($(“#container”));

</script>

事件

你也可以通過data屬性添加對Kendo UI組件的事件處理，屬性的值被當成一個JavaScript函數，其作用域為全局。

如下例：

<div id=“container”>
<input data-role=“numerictextbox” data-change=“numerictextbox_change” />
</div>
<script>
function numerictextbox_change(e) {
// Handle the “change” event
}
kendo.init($(“#container”));
</script>

事件處理函數也可以為一個成員函數，比如 foo.bar 可以看出為foo 對象的 bar 方法。例如：

<div id=“container”>
<input data-role=“numerictextbox” data-change=“handler.numerictextbox_change” />
</div>
<script>
var handler = {
numerictextbox_change: function (e) {
// Handle the “change” event
}
};
kendo.init($(“#container”));
</script>

數據源

支持數據綁定的UI組件的數據源也可以通過data-source 屬性來指定。 這個屬性可以為一個JavaScript對象，一個數組或是一個全局變量。

例如：使用JavaScript對象作為數據源。

<div id=“container”>
<input data-role=“autocomplete” data-source=“{data:[‘One’, ‘Two’]}” />
</div>
<script>
kendo.init($(“#container”));
</script>

使用JavaScript數組作為數據源。

<div id=“container”>
<input data-role=“autocomplete” data-source=“[‘One’, ‘Two’]” />
</div>
<script>
kendo.init($(“#container”));
</script>

使用一個可以全局訪問的變量作為數據源。

<div id=“container”>
<input data-role=“autocomplete” data-source=“dataSource” />
</div>
<script>
var dataSource = new kendo.data.DataSource( {
data: [ “One”, “Two” ]
});
kendo.init($(“#container”));
</script>

模板

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

<div id=“container”>
<input data-role="autocomplete" data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"
data-text-field="firstName"data-template="template" />
</div>
<script id="template" type="text/x-kendo-template">
<span>#: firstName # #: lastName #</span>
</script>
<script>
kendo.init($("#container"));
</script>

本文轉載自

購買正版授權的朋友可以點擊""哦~~~

慧都特邀Kendo UI原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>