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>