Kendo ui 使用总结----Kendo UI 模板

近来工作用到了一个未接触过的前端框架，在使用中有一些心得体会，记录下来，只是一部分心得，后期再补充。。

Kendo UI 模板

模板语法 Kendo 模板使用了一种称为“#”的语法形式，使用这种语法，#用来表明模板中的某个部分可以使用 JavaScript 数据来替代,这个玩意很有用。
用三种方式使用 # 语法：
1.显示字面量 #=#
2.显示HTML元素 #：#
3.执行任意的Javascript代码 #if() {# …#}#

显示原始数据 #= #


var template = kendo.template("<div id='box'>#= firstName #</div>")

调用实例

<div id="example"></div>
<script>
     var template = kendo.template("<div id='box'>#= firstName #</div>");
     var data = { firstName: "Todd" }; //A value in JavaScript/JSON
     var result = template(data); /Pass the data to the compiled template
     $("#example").html(result); //display the result
</script>

最终结果：“Todd”。

显示 HTML 数据 #：#

如果你需要显示经过 HTML 编码过的数据，使用 Kendo UI 模板可以自动处理这些编码过的 HTML 元素，但需要使用不同的语法 #: …#,例如：

var template = kendo.template("<div id='box'>#: firstName #</div>");

使用：

<div id="example"></div>
<script>
 var template = kendo.template("<div id='box'>#: firstName #</div>");
    var data = { firstName: "<b>Todd</b>" }; //Data with HTML tags
    var result = template(data); //Pass the data to the compiled template
    $("#example").html(result); //display the resulting encoded HTML Output (<b>Todd</b>)
</script>

结果：<b>Todd </b>

执行JS代码 # expression

无论是在行内模板中，还是在外部模板中，都可以使用JS变量和表达式。
示例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>