HTML5 UI框架Kendo UI Web中如何建立自定義組件（二）

    在前面的文章《 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下載