KendoUI的模板引擎使用的语法叫做"#号语法(Hash Syntax)",主要用来完成两件事情:渲染数据和执行JS表达式。
从JS对象渲染数据到HTML模板
- 使用等号渲染原始值
#= val #
- 使用冒号渲染HTML编码值
#: val #
两者的区别主要在于当数据值中包含HTML标签时,冒号方式会对值里的HTML标签进行转义,从而可以把标签作为字符串直接输出。
//uses #= #
var myTemplateRaw = kendo.template("<p>#= name #</p>");
var newHTMLRaw = myTemplateRaw({name:"<strong>Neo</strong>"});
console.log(newHTMLRaw); //<p><strong>Neo</strong></p>
$("#container").append(newHTMLRaw);
//uses #: #
var myTempalteHTMLEncoded = kendo.template("<p>#: name #</p>");
var newHTMLEncoded = myTempalteHTMLEncoded({name:"<strong>Shelly</strong>"});
console.log(newHTMLEncoded); //<p><strong>Shelly</strong></p>
$("#container").append(newHTMLEncoded);
页面效果:
执行JS表达式 # expression
示例1
<script type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.length; i++) { #
<li>#= data[i] #</li>
# } #
<ul>
</script>
示例2
var template = "#if(foo) {# #= foo # is true #}#";
示例3
<script type="text/x-kendo-template">
#if(isAdmin){#
<li>#: name # is Admin</li>
#}else{#
<li>#: name # is User</li>
#}#
</script>
无论是在行内模板中,还是在外部模板中,都可以使用JS变量和表达式。