Kendo UI开发教程:Kendo UI模板概述
来源:互联网 发布:软件可否申请专利 编辑:程序博客网 时间:2024/05/16 22:01
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块定义
本文转载自Kendo UI中文网
- 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 中文教程】概述
- 在前端获取上传的excel文件内容
- 《The.Go.Programming.Language.2015.11.pdf》之map和结构体
- LeetCode 198. House Robber
- jenkins上添加text parameter, 用脚本读取并存到配置文件中
- 题目:判断101-200之间有多少个素数,并输出所有素数。
- Kendo UI开发教程:Kendo UI模板概述
- SQL视图
- 2016.11.11 js对象(RegExp 事件)
- C# ListView用法详解 很完整
- 使用SevenZipSharp压缩、解压文件
- jquery 两种方法设置disabled属性
- Exsi5.0在虚拟机中安装时提示Intel VT不支持解决办法
- Laravel与Repository Pattern(仓库模式)——概念篇
- ndk编译出现的问题