Kendo UI 模板概述
Kendo UI 模板概述
Kendo UI 框架提供了一个易用,高性能的 JavaScript 模板引擎。通过模板可以创建一个 HTML 片段然后可以和 JavaScript 数据合并成最终的 HTML 元素。
Kendo 模板侧重于 UI 显示,支持关键的模板功能,着重于性能而不是语法上的方便。
模板语法 Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用 JavaScript 数据来替代。
用三种方式使用 # 语法:
- 显示字面量 #=#
- 显示HTML元素 #:#
- 执行任意的Javascript代码 #if() {# …#}#
注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\#”转义需要显示“#”的地方。
显示原始数据
显示数据的本来的形式是使用模板的一个最基本的用法,使用 Kendo UI 模板,可以使用如下类似的代码:
var template = kendo.template("<div id='box'>#= firstName #</div>")
上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码
<div id="example"></div> <script>var template = kendo.template("<div id='box'>#= firstName #</div>");var data = { firstName: "Todd" }; //A value in JavaScript/JSONvar result = template(data); /Pass the data to the compiled template $("#example").html(result); //display the result </script>
通过模板与数据的合并,最终显示“Todd”。
显示 HTML 数据
如果你需要显示经过 HTML 编码过的数据,使用 Kendo UI 模板可以自动处理这些编码过的 HTML 元素,但需要使用不同的语法 #: …#,例如:
var template = kendo.template("<div id='box'>#: firstName #</div>");
完整的示例如下:
<div id="example"></div> <script>var template = kendo.template("<div id='box'>#: firstName #</div>");var data = { firstName: "<b>Todd</b>" }; //Data with HTML tagsvar result = template(data); //Pass the data to the compiled template $("#example").html(result); //display the resulting encoded HTML Output (<b>Todd</b>) </script>
这个例子的显示结果为
<b>Todd </b>
而不是 Todd,如果需要显示 Todd ,则需要使用#= # 语法,显示 HTML 编码的一个主要作用是当你无需再模板中显示 HTML 标记,而是把整个标记和其内容作为字符串显示出来。
使用外部模板和表达式 在模板中也可以使用表达式,Kendo UI 支持者模板中执行 JavaScript 代码,在模板中使用 JavaScript 代码的方法是在 JavaScript 语句的前后加上#,比如下面模板显示一组列表:
<script id="javascriptTemplate" type="text/x-kendo-template"> <ul> # for (var i = 0; i < data.length; i++) { #<li>#= data[i] #</li> # } # </ul> </script>
然后为了使用这个模板,可以通过模板的 id ,通过 kendo.template 创建这个模板,然后和数据合并,比如:
<div id="example"></div><script id="javascriptTemplate" type="text/x-kendo-template"><ul># for (var i = 0; i < data.length; i++) { #<li>#= data[i] #</li> # } #</ul> </script><script type="text/javascript">//Get the external template definition using a jQuery selectorvar template = kendo.template($("#javascriptTemplate").html());//Create some dummy datavar data = ["Todd", "Steve", "Burke"];var result = template(data); //Execute the template $("#example").html(result); //Append the result </script>
可以看到模板执行了 JavaScipt 的 for 循环,并且我们使用了外部模板,外部模板的定义使用 type=”text/x-kendo-template”来定义,并通过其id来访问这个外表模板。 在模板中也可以定义变量,使用这个自定义变量的方法和使用字面量的方法类似。比如定义一个变量 myCustomVariable
<script id="javascriptTemplate" type="text/x-kendo-template"># var myCustomVariable = "foo"; #<p>#= myCustomVariable #</p> </script>
嵌入式模板 vs 外部模板
Kendo UI 模板可以使用嵌入式模板和外部模板:
- inline: 使用 JavaScript 字符串定义
- external: 使用 HTML Script 块定义
嵌入式模板使用比较简单的情况,对于比较复杂的模板一般使用外部模板。外部模板的定义的基本格式如下:
<script type="text/x-kendo-template" id="myTemplate"><!--Template content here--> </script>
外部模板必须定义一个 id,这样你才可以通过 id 来访问这个模板:
//extract the template content from script tag var templateContent = $("#myTemplate").html(); //compile a template var template = kendo.template(templateContent);
使用外部模板,你可以使用任意合法的 HTML 元素和 JavaScirpt,只需语法正确,比如:
<ul id="users"></ul><script type="text/x-kendo-template" id="myTemplate">#if(isAdmin){#<li>#: name # is Admin</li> #}else{#<li>#: name # is User</li> #}# </script><script type="text/javascript">var templateContent = $("#myTemplate").html();var template = kendo.template(templateContent);//Create some dummy datavar data = [{ name: "John", isAdmin: false },{ name: "Alex", isAdmin: true }];var result = kendo.render(template, data); //render the template $("#users").html(result); //append the result to the page </script>
转载于:https://www.cnblogs.com/miaosj/p/10361637.html
Kendo UI 模板概述相关推荐
- Kendo UI开发教程:Kendo UI模板概述
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaS ...
- Kendo UI Validator 概述
Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...
- Kendo ui 使用总结----Kendo UI 模板
近来工作用到了一个未接触过的前端框架,在使用中有一些心得体会,记录下来,只是一部分心得,后期再补充.. Kendo UI 模板 模板语法 Kendo 模板使用了一种称为"#"的语法 ...
- Kendo UI开发教程(8): Kendo UI 特效概述
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Kendo UI:概述(*)
简介 虽说如今业界的各种前端框架层出不穷,但在为后台管理系统选择前端框架的时候却经常陷入纠结. 而从笔者实践经验来看,KendoUI算是一个不错的选择,总结起来其优点有三 各种组件和功能都比较完善 文 ...
- 看Kendo UI文档
看完了Kendo UI的文档,感觉kendo UI就是简化了JS的许多内容,书写更加容易,文档里没找到treeview,去百度再找找看. 重点DataSource,Grid: 记:控制远程数据源: v ...
- kendoUI模板概述(template)
Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...
- UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
- Kendo UI Web教程分享
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件 ...
最新文章
- 【从零学习OpenCV 4】安装过程中问题解决方案
- Cocos2d-x坐标系介绍
- Dubbo 改造普通单体项目
- 使用mysqlsla 分析 mysql logs
- Android View体系(五)从源码解析View的事件分发机制
- python语言哪个人创造_Python语言是由哪个人创造的?
- Linux 【系统知识】 - Cgroup 初步了解
- 短信拦截马”黑色产业链与溯源取证研究
- 如何在没有RTDS硬件下使用RSCAD进行仿真研究
- 多元统计分析matlab,matlab与应用多元统计分析..doc
- WPF - 善用路由事件
- php获取h5视频直链,一种H5播放实时视频的方法与系统与流程
- 基于PLC的烟草真空回潮控制系统设计
- 隐藏17年的Firefox文件窃取漏洞,可结合WhatsApp钓鱼窃取文件
- 时间序列分析 | Python实现Tsprial时间序列特征提取
- Centos系统上安装并配置mysql的教程?
- 如何在Docker容器中安装RabbitMQ
- 差示光谱法的测定原理_金属基础知识,钢中碳含量的7种测定方法,你知道吗?...
- wamp集成环境php扩展,redis学习之路:wampserver集成环境安装php redis拓展
- 连接手机传输驱动安装问题
热门文章
- 什么是技术驱动型公司?阿里算吗?
- 全站HTTPS来了!有何优势、与HTTP有何不同
- 融资12亿的春雨CEO去世,为什么创业者的焦虑停不下来?
- 蓝翔改名变成“技院”了?网友评论炸了:我真的没想歪...
- 你若不离不弃,我必拼尽全力!
- 安卓绿色联盟安全标准1.0到2.0,让用户隐私更安全
- 【DSP开发】DSP程序优化
- hadoop2.2.0 core-site.xml--global properties
- ACM图论、网络流题目总结
- Java静态代理类的特点和示例