Kendo UI开发教程:Kendo UI模板概述

转帖|使用教程|编辑:龚雪|2016-11-11 09:36:59.000|阅读 1082 次

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

相关链接:

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块定义
本文转载自Kendo UI中文网
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:JavaScript HTML5跨平台UI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-11-11 09:45:40.000
0

非常详细的教程,感谢分享!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

购物车 在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat