HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

    在前面的文章《 HTML5 UI框架Kendo UI Web自定义组件（一）》中，对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解，下面将继续前面的内容。

使用一个数据源

    现在如果想要实现一个数据源组件或是MVVM aware模式，需要再执行一些其他的步骤。 在下面将会创建一个DataSource aware组件，要使DataSource aware有数据源，首先需要在DataSource基础对象上使用create convenience方法。

创建或初始化数据源：

that.dataSource = kendo.data.DataSource.create(that.options.dataSource); 
   这一行代码主要是为你的组件数据源提供了比较灵活的方式，这个样子你就不用创建一个新的数据源来绑定到组件上。

数据源作为数组：

1. $("#div").kendoRepeater({  
2.     dataSource: ["Item 1", "Item 2", "Item 3"]  
3. });
   

  如果你传递一个简单的数组， kendo.data.DataSource.create方法将会为你创建一个新的基于数组数据的DataSource，并返回到that.dataSource。你也可以通过指定它内嵌的配置值来新建一个datasource。

将数据源作为配置对象：

1. $("#div").kendoRepeater({  
2.     dataSource: {  
3.         transport: {  
4.             read: {  
5.                 url: "http://mydomain/customers"  
6.             }  
7.         }  
8.     }  
9. }); 
   

这里正在设置数据源的配置，但是并没有创建一个实例。这个 kendo.data.DataSource.create(that.options.dataSource)将会获得这个配置对象，并用指定的配置返 回一个新的DataSource实例。现在已经提供了相同的灵活性，在我们自己的组件中尽可能多的方式对repeater组件指定DataSource。

Handling Events：

    接下来需要做的就是绑定到DataSource change事件并处理它。在这里你将会基于从DataSource读取的数据改变你的DOM。通常可以用一个刷新的方法。一般都会公用这个刷新的方法， 主要由于在初始化后，你和其他人可能会在组件或某个节点上调用这个高性能。

>>>示例代码

Kendo UI Web下载

来源：oschina

链接：https://my.oschina.net/u/1240525/blog/177120