Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。
Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便。
模板语法
Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代。
用三种方式使用#语法:
- 显示字面量 #=#
- 显示HTML元素 #:#
- 执行任意的Javascript代码 #if() {# …#}#
注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\\#”转义需要显示“#”的地方。
显示原始数据
显示数据的本来的形式是使用模板的一个最基本的用法,使用Kendo UI模板,可以使用如下类似的代码:
1 | var template = kendo.template("#= firstName #") |
上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码
3 | var template = kendo.template("#= firstName #"); |
4 | var data = { firstName: "Todd" }; |
5 | var result = template(data); /Pass the data to the compiled template |
6 | $("#example").html(result); |
通过模板与数据的合并,最终显示“Todd”。
显示HTML数据
如果你需要显示经过HTML编码过的数据,使用Kendo UI模板可以自动处理这些编码过的HTML元素,但需要使用不同的语法 #: …#,例如:
1 | var template = kendo.template("#: firstName #"); |
完整的示例如下:
3 | var template = kendo.template("#: firstName #"); |
4 | var data = { firstName: "Todd" }; |
5 | var result = template(data); |
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!