HTML5 UI框架Kendo UI Web教程：建立自定義組件（三）

  Kendo UI Web包 含數百個建立HTML5 web app的必備元素，包括UI組件、數據源、驗證、一個MVVM框架、主題、模板等。在前面的2篇文章《HTML5 Web app開發工具Kendo UI Web教程：建立自定義組件》中，已經對在Kendo UI Web中如何建立自定義組件的方法和步驟作了一些的講解，本文將完成全部的內容。

模板繪製控件

    經過Kendo UI的Templates渲染進行HTML輸出，Kendo UI Templates容許你編譯HTML和注入數據或表達式到被評估以及做爲一個HTML字符串返回的DOM片斷的HTML中。在

    Kendo UI中的全部組件都容許指定一種除組件使用的默認模版以外的模版。要指定模版，須要首先添加模版到選擇對象中，並設置它的值爲一個空的字符串，相反其餘的配置設置，咱們不會在這裏設置它的默認值。

添加模版到選項：

 options: { name: "Repeater", autoBind: true, template: "" } 

設置這個模版的默認值：

that.template = kendo.template(that.options.template || "<p><strong>#= data #</strong></p>")

實現一個刷新功能

    因爲綁定到一個change方法，如今須要實現當DataSource改變或者是被直接調用的時候，這個refresh public函數會被調用，這個刷新方法就是我將要mutate DOM的地方。首先須要作的事情就是調用咱們來自DataSource數據的that.dataSource.view()，接下來就是使用 kendoRender，並隨着DataSource數據經過一個模版，這個就是Kendo UI組件mutate DOM的方法。渲染方法應用數據到數據源並返回HTML字符串。

公有Refresh Function：

refresh: function() { var that = this, view = that.dataSource.view(), html = kendo.render(that.template, view); } Mutate DOM Element HTML： refresh: function() { var that = this, view = that.dataSource.view(), html = kendo.render(that.template, view); that.element.html(html); } 

>>示例代碼

>>全文