Kendo UI 模板概述

Kendo UI 框架提供了一个易用,高性能的 JavaScript 模板引擎。通过模板可以创建一个 HTML 片段然后可以和 JavaScript 数据合并成最终的 HTML 元素。

Kendo 模板侧重于 UI 显示,支持关键的模板功能,着重于性能而不是语法上的方便。

模板语法 Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用 JavaScript 数据来替代。

用三种方式使用 # 语法:

  1. 显示字面量 #=#
  2. 显示HTML元素 #:#
  3. 执行任意的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 模板概述的更多相关文章

  1. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  2. Kendo UI Validator 概述

    Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...

  3. Kendo UI 特效概述

    Kendo UI 特效概述 Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成 HTML 元素的过渡显示.每种特效近可能的使用 CSS Transition ,对于一些老版 ...

  4. Kendo UI Widgets 概述

    UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 kendo 作为前缀.比 ...

  5. Kendo UI开发教程(8): Kendo UI 特效概述

    Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...

  6. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  7. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

  8. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

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

  9. Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件

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

随机推荐

  1. HDU3974(dfs+线段树)

    Assign the task Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...

  2. HTTP协议详解之http请求分析

    当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了We ...

  3. Hibernate 的HQL和sql有什么区别

    转自:https://blog.csdn.net/haozhugogo/article/details/54575802sql 面向数据库表查询 hql 面向对象查询 hql : from 后面跟的 ...

  4. day9http协议

    Http协议入门 2.1 什么是http协议 http协议: 对浏览器客户端 和  服务器端 之间数据传输的格式规范 2.2 查看http协议的工具 1)使用火狐的firebug插件(右键->f ...

  5. Centos7.2 下安装配置pip

    一.pip下载 wget https://files.pythonhosted.org/packages/ae/e8/2340d46ecadb1692a1e455f13f75e596d4eab3d11 ...

  6. HDU - 5878 2016青岛网络赛 I Count Two Three(打表+二分)

    I Count Two Three 31.1% 1000ms 32768K   I will show you the most popular board game in the Shanghai ...

  7. Android开发中,那些让你觉得相见恨晚的方法、类或接口

    Throwable类中的getStackTrace()方法,根据这个方法可以得到函数的逐层调用地址,其返回值为StackTraceElement[],而在StackTraceElement类中有四个方 ...

  8. 3dmax室内设计,建筑视频

    第一教程篮球场 http://video.1kejian.com/video/?30800-0-1.html 第一课 元素级别-flip反转(直接看模型里面) 第二课 alt+r = ring crt ...

  9. GoWeb开发_Iris框架讲解(一)

    Golang介绍 Go语言是谷歌推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性.谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发Go,是因为过去10多年间软 ...

  10. 洛谷P1582 倒水

    P1582 倒水 题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把 ...