Kendo UI開發教程：初始化Data屬性

前面在介紹準備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組件：

1 2 3 4 5 6

<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：

1 2 3 4 5 6 7

<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?]}?.

以下例：

1 2 3 4 5 6 7

<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函數，其做用域爲全局。

以下例：

1 2 3 4 5 6 7 8 9

<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 方法。例如：

1 2 3 4 5 6 7 8 9 10 11

<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對象做爲數據源。

1 2 3 4 5 6

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

使用JavaScript數組做爲數據源。

1 2 3 4 5 6

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

使用一個能夠全局訪問的變量做爲數據源。

1 2 3 4 5 6 7 8 9

<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。好比：

1 2 3 4 5 6 7 8 9

<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中文網