KendoUI模板引擎 - #号语法

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>&lt;strong&gt;Shelly&lt;/strong&gt;</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变量和表达式。