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); } 

>>示例代码

>>全文