kendo “#”号_综合

KendoUI的模板引擎使用的语法叫做”#号语法（Hash Syntax）”，主要用来完成两件事情：渲染数据和执行js表达式。

用三种方式使用 # 语法：
（1）显示字面量 #=#
（2）显示HTML元素 #：#
（3）执行任意的Javascript代码 #if() {# …#}#

例子：

（1）//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);（2）//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);（3）js：
<div id="example"></div><script id="javascriptTemplate" type="text/x-kendo-template"><ul># for (var i = 0; i < data.length; i++) { #<li>#= data[i] #</li># } #</ul> </script><script type="text/javascript">//Get the external template definition using a jQuery selectorvar template = kendo.template($("#javascriptTemplate").html());//Create some dummy datavar data = ["Todd", "Steve", "Burke"];var result = template(data); //Execute the template$("#example").html(result); //Append the result </script>

嵌入式模板 vs 外部模板

Kendo UI 模板可以使用嵌入式模板和外部模板：
（1）inline: 使用 JavaScript 字符串定义
（2）external: 使用 HTML Script 块定义

嵌入式模板使用比较简单的情况，对于比较复杂的模板一般使用外部模板。外部模板的定义的基本格式如下：

 <script type="text/x-kendo-template" id="myTemplate"><!--Template content here--> </script>

外部模板必须定义一个 id,这样你才可以通过 id 来访问这个模板：

var templateContent = $("#myTemplate").html(); 
var template = kendo.template(templateContent);

使用外部模板，你可以使用任意合法的 HTML 元素和 JavaScirpt，只需语法正确，比如：

<ul id="users"></ul><script type="text/x-kendo-template" id="myTemplate">#if(isAdmin){#<li>#: name # is Admin</li>#}else{#<li>#: name # is User</li>#}# </script><script type="text/javascript">var templateContent = $("#myTemplate").html();var template = kendo.template(templateContent);//Create some dummy datavar data = [{ name: "John", isAdmin: false },{ name: "Alex", isAdmin: true }];var result = kendo.render(template, data); //render the template$("#users").html(result); //append the result to the page </script>

输出结果：

John is User；
Alex is Admin.