HTML5 UI框架Kendo UI Web中如何建立自定义组件(二)

    在前面的文章《 HTML5 UI框架Kendo UI Web自定义组件(一)》中,对在Kendo UI Web中如何建立自定义组件做出了一些基础讲解,下面将继续前面的内容。

使用一个数据源 html

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

建立或初始化数据源:
框架

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

数据源做为数组: 性能

  1. $("#div").kendoRepeater({  
  2.     dataSource: ["Item 1""Item 2""Item 3"]  
  3. });
  若是你传递一个简单的数组, kendo.data.DataSource.create方法将会为你建立一个新的基于数组数据的DataSource,并返回到that.dataSource。你也能够经过指定它内嵌的配置值来新建一个datasource。

将数据源做为配置对象: url

  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 Eventsspa

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

>>>示例代码 对象

Kendo UI Web下载
相关文章
相关标签/搜索