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

除了使用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开发教程” class=”img-thumbnail” src=”http://image.evget.com/images/article/2016/kendo_ui_2_1.png”>
<p>其中方法kendo.init($(container) 会查找所有包含有data-role属性的元素，然后初始化这些Kendo UI组件。每个kendo UI组件的role的值为该UI组件名称的小写名字，比如utocompleteropdownlist</p>
<p>缺省情况下，kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件（按这个顺序）。而Kendo UI Mobile应用首先初始化Kendo UI Mobile组件，然后是Kendo UI Web组件，最后是Kendo UI DataViz组件。这意味着data-role=istview在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。</p>
<p>比如：在Mobile应用中指明使用Kendo UI Web的listview：</p>
<pre class=

<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=00 对于一些使用Camel-cased 的属性则是通过添加“-” ，比如AutoComplete的ignoreCase 的属性可以通过 data-ignore-case来设置。而对于一些已经是使用data前缀的属性则无需再添加data-前缀。比如dataTextField属性可以通过data-text-field属性来配置,dataSource属性可以通过data-source属性来配置。对于一些复杂的配置可以通过JavaScript 对象字面量来配置，比如：data-source=data: [{name: ohn Doe,{name: ane 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开发教程” class=”img-thumbnail” src=”http://image.evget.com/images/article/2016/kendo_ui_2_2.png”>
<h4><strong>事件</strong></h4>
<p>你也可以通过data属性添加对Kendo UI组件的事件处理，属性的值被当成一个JavaScript函数，其作用域为全局。</p>
<p>如下例：</p>
<pre class=

<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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情

标签：JavaScript HTML5UI界面KendoUIHTML5/JS

来源：慧都

声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

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

配置

数据源

模板

本文转载自Kendo UI中文网

购买正版授权的朋友可以点击”咨询在线客服”哦~~~

特邀Kendo UI原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情

相关推荐

发表回复