Kendo UI开发教程:初始化Data属性

转帖|行业资讯|编辑:龚雪|2016-09-30 09:22:04.000|阅读 946 次

概述:除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化。本文主要为大家介绍如何使用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组件:

<div id=“container”>
<input data-role=“numerictextbox” />
</div>
<script>
kendo.init($(“#container”));
</script>
>Kendo UI开发教程

其中方法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>
>Kendo UI开发教程

事件

你也可以通过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中文网
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:JavaScript HTML5UI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录慧都网发表评论登录


慧都网友 2019-02-21 16:30:40.000
0

zhazha


慧都网友 2019-02-21 16:30:33.000
0

zhazha


慧都网友 2019-02-21 15:42:30.000
0

https://www.evget.com/img/about/beianga.png


慧都网友 2016-09-30 09:55:46.000
0

非常好的教程,过程详细,赞赞赞!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat