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/JSON
var 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 tags
var 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 selector
var template = kendo.template($("#javascriptTemplate").html()); //Create some dummy data
var 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 data
var 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>
Kendo UI 模板概述的更多相关文章
- Kendo UI开发教程(7): Kendo UI 模板概述
Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...
- Kendo UI Validator 概述
Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...
- Kendo UI 特效概述
Kendo UI 特效概述 Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成 HTML 元素的过渡显示.每种特效近可能的使用 CSS Transition ,对于一些老版 ...
- Kendo UI Widgets 概述
UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 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开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
随机推荐
- javascript 中的深复制 和 其实现方法
首先,我们需要明白什么是深复制(侧重指对象方面)? 在javascript中,复制分为浅复制和深复制,个人理解,浅复制就是直接将引用复制,复制前后的两个对象指向同一个内存地址,对其中一个进行操作,另外 ...
- 【opencv学习笔记五】一个简单程序:图像读取与显示
今天我们来学习一个最简单的程序,即从文件读取图像并且创建窗口显示该图像. 目录 [imread]图像读取 [namedWindow]创建window窗口 [imshow]图像显示 [imwrite]图 ...
- centos7 install pip
1. 安装过程 yum -y install epel-release yum install python-pip pip install --upgrade pip
- stm32之时钟控制
本文提到的有以下内容: 时钟系统与总线矩阵 SysTick系统定时器 RTC实时时钟 看门狗定时器 通用定时器 一.时钟系统与总线矩阵 stm32F4的时钟树如下图所示: 在STM32中,有五个时钟源 ...
- [hiho第92周]Miller-Rabin素性测试的c++实现
证明: 如果n是素数,整数$a$ 与$n$ 互素,即$n$ 不整除$a$ ,则${a^{n - 1}} \equiv 1(\bmod n)$ ,如果能找到一个与$n$ 互素的整数$a$ ,是的上式不成 ...
- linux下安装mysql的三种方法:rpm包安装、yum安装、源码包安装
1 安装MySQL数据库服务器安装方法一://查询系统自带的数据库rpm -qa | grep -i mysql //卸载查询到的所有mysqlrpm -e --nodeps mysql-libs-5 ...
- WCF大文件传输【转】
http://www.cnblogs.com/happygx/archive/2013/10/29/3393973.html WCF大文件传输 WCF传输文件的时候可以设置每次文件的传输大小,如果是小 ...
- Keras AttributeError 'NoneType' object has no attribute '_inbound_nodes'
问题说明: 首先呢,报这个错误的代码是这行代码: model = Model(inputs=input, outputs=output) 报错: AttributeError 'NoneType' o ...
- Unity ShaderLab 光照随笔
unity camera默认3种渲染路径,unity5.50里面有4种 camera Rendering Path 1 vertexLit(逐顶点,一般在vert中处理) 2 forward (前向 ...
- 使用tcpdump抓取EOS帐户创建与交易数据
基本环境配置 EOS 版本:1.0.1(2018-06-04更新) 节点nodeos http监听端口:127.0.0.1:8888 本地钱包keosd http监听端口:127.0.0.1:89 ...