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中的所有组件都允许指定一种除组件使用的默认模版之外的模版。要指定模版，需要首先添加模版到选择对象中，并设置它的值为一个空的字符串，相反其他的配置设置，我们不会在这里设置它的默认值。

添加模版到选项：

设置这个模版的默认值：

    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：

>>示例代码

>>全文

HTML5 UI框架Kendo UI Web教程：创建自定义组件（三）的更多相关文章

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

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  2. HTML5 UI框架Kendo UI Web自定义组件（一）

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...

  3. HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...

  4. jQuery UI vs Kendo UI & jQuery Mobile vs Kendo UI Mobile

    jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...

  5. Kendo UI for jQuery使用教程——创建自定义捆绑包

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  6. 创新高性能移动 UI 框架-Canvas UI 框架

    WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium ...

  7. 很好的开源UI框架Chico UI

    介绍一个很好的开源的UI框架,依赖于jquery 官网:http://www.chico-ui.com.ar/ 以下是相关截图: 消息提示 自动完成 分页,列表 Chico UI是什么? Chico ...

  8. ASP.NET使用ConfigurationSection在Web.Config创建自定义配置节集合

    核心代码 using System; using System.Data; using System.Configuration; using System.Web; using System.Web ...

  9. ASP.NET使用ConfigurationSection在Web.Config创建自定义配置节

    主要代码,一定要继续System.Configuration.ConfigurationSection,具体的节点名称可以自行修改 using System; using System.Data; u ...

随机推荐

  1. 创建 maven 本地仓库

    在 pom.xml 添加依赖包的时候,有时候会提示无法从 http://repo1.maven.org/maven2/ 获取的情况,这时可配置个本地仓库: 从网上下载 maven 仓库网站源码包 Ne ...

  2. Compound Words

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91209#problem/C 题意:   有一堆按照字典序排好的字符串,问你有多 ...

  3. c++ 符号执行顺序小例子

    if ( a[i] == b[i] && ++i < 0)  这个表达式的执行顺序 1. ; )// 输出 True cout<<"True"&l ...

  4. HDU 1018 大数（求N！的位数/相加）

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. hdu Tempter of the Bone

    很典型的dfs题,但是涉及到很多的剪枝 . 奇偶剪枝: 是数据结构的搜索中,剪枝的一种特殊小技巧. 现假设起点为(sx,sy),终点为(ex,ey),给定t步恰好走到终点, s         |   ...

  6. Iconfont矢量图标平台全面升级

    阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师p ...

  7. 关于web-dev-server 记录

    package.json "scripts": { "init": "webpack --progress --config webpack.dev. ...

  8. 领导者/追随者（Leader/Followers）模型和半同步/半异步（half-sync/half-async）模型都是常用的客户-服务器编程模型

    领导者-追随者(Leader/Followers)模型的比喻 半同步/半异步模型和领导者/追随者模型的区别: 半同步/半异步模型拥有一个显式的待处理事件队列,而领导者-追随者模型没有一个显式的队列(很 ...

  9. Unity3D中自带事件函数的执行顺序(转)

    原文:http://www.jianshu.com/p/1d93ece664e2 在Unity3D脚本中,有几个Unity3D自带的事件函数按照预定的顺序执行作为脚本执行.其执行顺序如下: 编辑器(E ...

  10. C#常用命名空间

    MSDN上的C#.NET Framework类库文档目录树,本人觉得有点不得要领,于是参考搜到的结果简单整理如下: 一.基础命名空间 System 处理内建数据.数学计算.随机数的产生.环境变量.垃圾 ...