初始化 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.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

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

事件

你也可以通过 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>