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

星期六, 2018-07-21 03:23 — adminshiping1

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
2var templateContent = $("#myTemplate").html();
3//compile a template
4var 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>

来自 https://www.cnblogs.com/jiangu66/p/3212507.html

普通分类:

javascript

You are here

模板语法

显示原始数据

显示HTML数据

使用外部模板和表达式

嵌入式模板 vs 外部模板

友情链接

搜索表单

用户登录

You are here

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

模板语法

显示原始数据

显示HTML数据

使用外部模板和表达式

嵌入式模板 vs 外部模板

友情链接