最新最全的
KendoUI技术文章

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

Contents 1配置 2事件 3数据源 4模板 前面在介绍准备Kendo UI开发环境时我们使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件: $(?#datepicker?).kendoDatePicker(); 除了使用jQuery插件的方法来初始化方

Contents

前面在介绍准备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. <div id=“container”>
  2. <input data-role=“numerictextbox” />
  3. </div>
  4. <script>
  5. kendo.init($(“#container”));
  6. </script>
复制

20130612001

其中方法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>
复制

20130612002

事件

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

事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为foo 对象的 bar 方法。

例如:

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

使用JavaScript数组作为数据源。

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

模板

  1. 模板也可以通过Data属性来设置,属性的值代表用来定义模板的Script元素的Id。比如:
  2.  
    1. <div id=“container”>
    复制
  3.     <input data-role="autocomplete"
    复制
  4.            data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"
    复制
  5.            data-text-field="firstName"
    复制
  6.            data-template="template" />
    复制
  7. </div>
    复制
  8. <script id="template" type="text/x-kendo-template">
    复制
  9.     <span>#: firstName # #: lastName #</span>
    复制
  10. </script>
    复制
  11. <script>
    复制
  12. kendo.init($("#container"));
    复制
  13. </script>
    复制
  14.  
分享到:更多 ()

评论 抢沙发

评论前必须登录!