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

最新推荐文章于 2024-09-09 09:20:30 发布

引路蜂

最新推荐文章于 2024-09-09 09:20:30 发布

阅读量1.4w

点赞数 6

分类专栏： Kendo 教程 jQuery Kendo 开发教程

本文链接：https://blog.youkuaiyun.com/mapdigit/article/details/9440783

版权

本文介绍了Kendo UI的模板引擎，重点讲解了模板语法、显示原始数据和HTML数据的方法，以及外部模板和表达式的使用。通过实例展示了如何创建和应用模板，包括嵌入式与外部模板的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章