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