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

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