最新最全的
KendoUI技术文章

Kendo UI开发教程(7): Kendo UI 模板概述

Contents 1模板语法 2显示原始数据 3显示HTML数据 4使用外部模板和表达式 5嵌入式模板 vs 外部模板 Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScrip

Contents

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. <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>
复制

20130622001

可以看到模板执行了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 块定义

未经允许,不得转载本站任何文章:KendoUI中文网 » Kendo UI开发教程(7): Kendo UI 模板概述

分享到:更多 ()

评论 抢沙发

评论前必须登录!