文档章节

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

Miss_Hello_World
 Miss_Hello_World
发布于 2016/11/11 09:50
字数 971
阅读 27
收藏 1

Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便。

模板语法

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

用三种方式使用#语法:

  1. 显示字面量 #=#
  2. 显示HTML元素 #:#
  3. 执行任意的Javascript代码  #if() {# ?#}#

注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\\#?转义需要显示“#”的地方。

显示原始数据

显示数据的本来的形式是使用模板的一个最基本的用法,使用Kendo UI模板,可以使用如下类似的代码:

1

var template = kendo.template(“<div id="’box’">#= firstName #</div>”)

上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码:

1

2

3

4

5

6

7

<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元素,但需要使用不同的语法 #: ?#,例如:

1

var template = kendo.template(“<div id="’box’">#: firstName #</div>”);

完整的示例如下:

1

2

3

4

5

6

7

<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>

这个例子的显示结果为:

1

<b>Todd </b>

而不是 Todd,如果需要显示Todd ,则需要使用#= # 语法,显示HTML编码的一个主要作用是当你无需再模板中显示HTML标记,而是把整个标记和其内容作为字符串显示出来。

使用外部模板和表达式

在模板中也可以使用表达式,Kendo UI 支持者模板中执行JavaScript代码,在模板中使用JavaScript代码的方法是在JavaScript语句的前后加上#,比如下面模板显示一组列表:

1

2

3

4

5

6

7

<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 创建这个模板,然后和数据合并,比如:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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:

1

2

3

4

5

6

<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中文网

本文转载自:

Miss_Hello_World
粉丝 22
博文 668
码字总数 404202
作品 0
九龙坡
私信 提问
UI组件Kendo UI发布R2 2018|附下载

通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50%...

Miss_Hello_World
2018/07/17
47
0
Kendo UI常用示例汇总(十八)

Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core,有40+个框架和组件;商业版整合了之前的Kendo UI Web、Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件...

Miss_Hello_World
2016/09/08
50
0
Kendo UI开发教程:初始化Data属性

前面在介绍准备Kendo UI开发环境时我们使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件: $(?#datepicker?).kendoDatePicker();除了使用jQuery插件的方法来初始化方法外,每个Kendo...

Miss_Hello_World
2016/09/30
18
0
Kendo UI常用示例汇总(三)

<Kendo UI Professional试用版下载> Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core,有40+个框架和组件;商业版整合了之前的Kendo UI Web、Kendo UI Mobile 和 Kend...

Miss_Hello_World
2016/03/29
38
0
Kendo UI开发教程:UI Widgets概述

Kendo UI 是基于jQuery 库开发的,Kendo UI widgets是以jQuery 插件形式提供的。这些插件的名称基本上都是以kendo作为前缀。比如 Kendo的autocomplete UI 组件名称为 kendoAutoComplete ,Ken...

Miss_Hello_World
2016/10/10
31
0

没有更多内容

加载失败,请刷新页面

加载更多

for循环

九九乘法表 示例:for(int i = 1; i <= 9; i++){ for (int j = 1; j <= i; j++) { // 每次开始i循环,j都会重新定义为j=1,然后开始循环计算 System.out.print(j +......

Shutting
4分钟前
1
0
小王子1

一定要帅! 韩国设计师品牌 insgram全世界得网红 韩国潮男穿搭 HM 找到穿衣服最好看的人,跟他比,比他好看。 在兴趣前,不要表现目的性,压力 关系是不热就冷的! 不喜欢压力,不喜欢负责任...

阿锋zxf
23分钟前
5
0
时间戳

1 loadTimeString(ts) { var d = new Date(); if (String(ts).length == 10) { d = new Date(ts * 1000); ......

东方巨人
24分钟前
3
0
Redis Cluster

Redis Cluster 集群 redis集群有以下几种方式 普通一主多从 普通一主多从+哨兵 cluster分片模式 一主多从 搭建方式网上很多,就不多描述了。 这种集群方式,一般master用作写,slave用做读,...

lazy~
25分钟前
4
0
 介绍一款优秀的通用管理权限快速开发框架

这是一套以权限管理为主的轻量化快速开发框架,配置有流程、专业表单、权限、app、企业微信等基础功能模块,在开发通用软件的效率上很有优势。 软件平台常用研发需求分析 《那些年我们一起做...

我想造火箭
41分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部