Kendo UI开发教程(7): Kendo UI 模板概述
来源:互联网 发布:分辨网络安全隐患功能 编辑:程序博客网 时间:2024/05/17 07:42
Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。
Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便。
模板语法
Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代。
用三种方式使用#语法:
- 显示字面量 #=#
- 显示HTML元素 #:#
- 执行任意的Javascript代码 #if() {# …#}#
注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\\#”转义需要显示“#”的地方。
显示原始数据
显示数据的本来的形式是使用模板的一个最基本的用法,使用Kendo UI模板,可以使用如下类似的代码:
1
var
template = kendo.template(
"<div id='box'>#= firstName #</div>"
)
上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码
1
<div id=
"example"
></div>
2
<script>
3
var
template = kendo.template(
"<div id='box'>#= firstName #</div>"
);
4
var
data = { firstName:
"Todd"
};
//A value in JavaScript/JSON
5
var
result = template(data); /Pass the data to the compiled template
6
$(
"#example"
).html(result);
//display the result
7
</script>
通过模板与数据的合并,最终显示“Todd”。
显示HTML数据
如果你需要显示经过HTML编码过的数据,使用Kendo UI模板可以自动处理这些编码过的HTML元素,但需要使用不同的语法 #: …#,例如:
1
var
template = kendo.template(
"<div id='box'>#: firstName #</div>"
);
完整的示例如下:
1
<div id=
"example"
></div>
2
<script>
3
var
template = kendo.template(
"<div id='box'>#: firstName #</div>"
);
4
var
data = { firstName:
"<b>Todd</b>"
};
//Data with HTML tags
5
var
result = template(data);
//Pass the data to the compiled template
6
$(
"#example"
).html(result);
//display the resulting encoded HTML Output (<b>Todd</b>)
7
</script>
这个例子的显示结果为
1
<
b
>Todd </
b
>
而不是 Todd,如果需要显示Todd ,则需要使用#= # 语法,显示HTML编码的一个主要作用是当你无需再模板中显示HTML标记,而是把整个标记和其内容作为字符串显示出来。
使用外部模板和表达式
在模板中也可以使用表达式,Kendo UI 支持者模板中执行JavaScript代码,在模板中使用JavaScript代码的方法是在JavaScript语句的前后加上#,比如下面模板显示一组列表:
1
<script id=
"javascriptTemplate"
type=
"text/x-kendo-template"
>
2
<ul>
3
# for (var i = 0; i < data.length; i++) { #
4
<li>
#= data[i] #</li>
5
# } #
6
</ul>
7
</script>
然后为了使用这个模板,可以通过模板的id ,通过kendo.template 创建这个模板,然后和数据合并,比如:
1
<div id=
"example"
></div>
2
3
<script id=
"javascriptTemplate"
type=
"text/x-kendo-template"
>
4
<ul>
5
# for (var i = 0; i < data.length; i++) { #
6
<li>
#= data[i] #</li>
7
# } #
8
</ul>
9
</script>
10
11
<script type=
"text/javascript"
>
12
//Get the external template definition using a jQuery selector
13
var
template = kendo.template($(
"#javascriptTemplate"
).html());
14
15
//Create some dummy data
16
var
data = [
"Todd"
,
"Steve"
,
"Burke"
];
17
18
var
result = template(data);
//Execute the template
19
$(
"#example"
).html(result);
//Append the result
20
</script>
可以看到模板执行了JavaScipt的for 循环,并且我们使用了外部模板,外部模板的定义使用type=”text/x-kendo-template”来定义,并通过其id来访问这个外表模板。
在模板中也可以定义变量,使用这个自定义变量的方法和使用字面量的方法类似。比如定义一个变量myCustomVariable
1
<script id=
"javascriptTemplate"
type=
"text/x-kendo-template"
>
2
# var myCustomVariable = "foo"; #
3
<p>
4
#= myCustomVariable #
5
</p>
6
</script>
嵌入式模板 vs 外部模板
Kendo UI 模板可以使用嵌入式模板和外部模板:
- inline: 使用JavaScript字符串定义
- external: 使用HTML Script 块定义
嵌入式模板使用比较简单的情况,对于比较复杂的模板一般使用外部模板。外部模板的定义的基本格式如下:
1
<script type=
"text/x-kendo-template"
id=
"myTemplate"
>
2
<!--Template content here-->
3
</script>
外部模板必须定义一个id,这样你才可以通过id 来访问这个模板:
1
//extract the template content from script tag
2
var
templateContent = $(
"#myTemplate"
).html();
3
//compile a template
4
var
template = kendo.template(templateContent);
使用外部模板,你可以使用任意合法的HTML元素和JavaScirpt,只需语法正确,比如:
1
<ul id=
"users"
></ul>
2
3
<script type=
"text/x-kendo-template"
id=
"myTemplate"
>
4
#if(isAdmin){#
5
<li>
#: name # is Admin</li>
6
#}else{#
7
<li>
#: name # is User</li>
8
#}#
9
</script>
10
11
<script type=
"text/javascript"
>
12
var
templateContent = $(
"#myTemplate"
).html();
13
var
template = kendo.template(templateContent);
14
15
//Create some dummy data
16
var
data = [
17
{ name:
"John"
, isAdmin:
false
},
18
{ name:
"Alex"
, isAdmin:
true
}
19
];
20
21
var
result = kendo.render(template, data);
//render the template
22
23
$(
"#users"
).html(result);
//append the result to the page
24
</script>
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程:Kendo UI模板概述
- Kendo UI开发教程:Kendo DataSource概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程:UI Widgets概述
- Kendo UI开发教程(6): Kendo DataSource 概述
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- Kendo UI开发教程(6): Kendo DataSource 概述
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- Kendo UI教程: Kendo MVVM (一) 概述
- Kendo UI开发教程(1): 概述
- Kendo UI开发教程(1): 概述
- Kendo UI开发教程(1): 概述
- 【Kendo UI 中文教程】概述
- SQL语句之alter database和alter tablespace语句
- .net aspx源文件
- Kendo UI开发教程(6): Kendo DataSource 概述
- 视频加密和程序加密工具超级狗的一些介绍和使用方法
- 揭开.NET消息循环的神秘面纱
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- 贪心水题搭配溶液
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- sizeof详解
- Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
- 序列化DataTable
- 帅气的列表控件tingGrid(一)