Kendo UI开发教程(3): 初始化Data 属性
2013-06-19 07:36
274 查看
前面在介绍准备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组件
其中方法kendo.init($(“#container”)) 会查找所有包含有data-role属性的元素,然后初始化这些Kendo UI组件。 每个kendo UI组件的role的值为该UI组件名称的小写名字,比如”autocomplete”或”dropdownlist”。缺省情况下,kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件(按这个顺序)。 而Kendo UIMobile应用 首先初始化Kendo UI Mobile组件,然后是Kendo UI Web组件,最后是Kendo UI DataViz组件。 这意味着data-role=”listview” 在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。
比如:在Mobile应用中 指明使用Kendo UI Web的listview
事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为foo 对象的 bar 方法。例如:
使用JavaScript数组作为数据源。
使用一个可以全局访问的变量作为数据源。
[/code]
除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化,此时你需要设置data的role属性,然后调用kendo.init方法。
使用初始化Data属性的方法在页面上包含有大量Kendo UI控件时非常便利。 首先, 组件的配置包含在目标元素中,第二无需首先查找每个元素然后调用jQuery方法,你只需调用一次kendo.init()方法。
Kendo UI Mobile应用通常使用Data属性来初始化。如下例使用data 属性来初始化一个UI组件
1 | <div id= "container" > |
2 | <input data-role= "numerictextbox" /> |
3 | </div> |
4 | <script> |
5 | kendo.init($( "#container" )); |
6 | </script> |
其中方法kendo.init($(“#container”)) 会查找所有包含有data-role属性的元素,然后初始化这些Kendo UI组件。 每个kendo UI组件的role的值为该UI组件名称的小写名字,比如”autocomplete”或”dropdownlist”。缺省情况下,kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件(按这个顺序)。 而Kendo UIMobile应用 首先初始化Kendo UI Mobile组件,然后是Kendo UI Web组件,最后是Kendo UI DataViz组件。 这意味着data-role=”listview” 在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。
比如:在Mobile应用中 指明使用Kendo UI Web的listview
1 | <div data-role= "view" > |
2 | <!-- specify the Kendo UI Web ListView widget --> |
3 | <div data-role= "kendo.ui.ListView" ></div> |
4 | </div> |
5 | <script> |
6 | var app = new kendo.mobile.Application(); |
7 | </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 | <div id= "container" > |
2 | <input data-role= "autocomplete" |
3 | data-ignore- case = "true" |
4 | data-text-field= "name" |
5 | data-source= "{data: [{name: 'John Doe'},{name: 'Jane Doe'}]}" |
6 | /> |
7 | </div> |
8 | <script> |
9 | kendo.init($( "#container" )); |
10 |
11 | </script> |
事件
你也可以通过data属性添加对Kendo UI组件的事件处理,属性的值被当成一个JavaScript函数,其作用域为全局。如下例:1 | <div id= "container" > |
2 | <input data-role= "numerictextbox" data-change= "numerictextbox_change" /> |
3 | </div> |
4 | <script> |
5 | function numerictextbox_change(e) { |
6 | // Handle the "change" event |
7 | } |
8 | kendo.init($( "#container" )); |
9 | </script> |
1 | <div id= "container" > |
2 | <input data-role= "numerictextbox" data-change= "handler.numerictextbox_change" /> |
3 | </div> |
4 | <script> |
5 | var handler = { |
6 | numerictextbox_change: function (e) { |
7 | // Handle the "change" event |
8 | } |
9 | }; |
10 | kendo.init($( "#container" )); |
11 | </script> |
数据源
支持数据绑定的UI组件的数据源也可以通过data-source 属性来指定。 这个属性可以为一个JavaScript对象,一个数组或是一个全局变量。例如:使用JavaScript对象作为数据源.1 | <div id= "container" > |
2 | <input data-role= "autocomplete" data-source= "{data:['One','Two']}" /> |
3 | </div> |
4 | <script> |
5 | kendo.init($( "#container" )); |
6 | </script> |
1 | <div id= "container" > |
2 | <input data-role= "autocomplete" data-source= "['One','Two']" /> |
3 | </div> |
4 | <script> |
5 | kendo.init($( "#container" )); |
6 | </script> |
1 | <div id= "container" > |
2 | <input data-role= "autocomplete" data-source= "dataSource" /> |
3 | </div> |
4 | <script> |
5 | var dataSource = new kendo.data.DataSource( { |
6 | data: [ "One" , "Two" ] |
7 | }); |
8 | kendo.init($( "#container" )); |
9 | </script> |
模板
模板也可以通过Data属性来设置,属性的值代表用来定义模板的Script元素的Id。比如:
[code]1 | <div id= "container" > |
2 | <input data-role= "autocomplete" |
3 | data-source= "[{firstName:'John',lastName: 'Doe'},{firstName:'Jane',lastName: 'Doe'}]" |
4 | data-text-field= "firstName" |
5 | data-template= "template" /> |
6 | </div> |
7 | <script id= "template" type= "text/x-kendo-template" > |
8 | <span> #: firstName # #: lastName #</span> |
9 | </script> |
10 | <script> |
11 | kendo.init($( "#container" )); |
12 | </script> |
相关文章推荐
- Kendo UI开发教程(3): 初始化Data 属性
- Kendo UI开发教程:初始化Data属性
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十八) 经典式属性设计及完美的物理攻击系统
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- Yii Framework 开发教程(28) Data Provider 简介
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
- HTML5 [data-]属性——使用HTML标签的data属性初始化JS组件
- Kendo UI开发教程(17): Kendo MVVM 数据绑定(六) Html
- Kendo UI开发教程(5): 使用 Kendo UI库实现对象的继承
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style
- Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
- [ios开发基础之 Core Data [1] ]Core Data数据持久性存储基础教程
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- 【干货分享】大数据开发套件DataIDE使用教程
- HTML5/JS开发框架Kendo UI视频教程集合
- Kendo UI开发教程(4): UI Widgets 概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text