Kendo UI 模板概述

2020-12-09 13:40 更新

Kendo UI 模板概述

Kendo UI 框架提供了一個易用,高性能的 JavaScript 模板引擎。通過模板可以創(chuàng)建一個 HTML 片段然后可以和 JavaScript 數(shù)據(jù)合并成最終的 HTML 元素。

Kendo 模板側(cè)重于 UI 顯示,支持關鍵的模板功能,著重于性能而不是語法上的方便。

模板語法 Kendo 模板使用了一種稱為“#”的語法形式,使用這種語法,#用來表明模板中的某個部分可以使用 JavaScript 數(shù)據(jù)來替代。

用三種方式使用 # 語法:

  1. 顯示字面量 #=#
  2. 顯示HTML元素 #:#
  3. 執(zhí)行任意的Javascript代碼 #if() {# …#}#

注意:如何你的模板中包含有“#”字符,不是用來綁定的部分,你必須使用轉(zhuǎn)義字符,否則會引起模板編譯錯誤。 你可以通過“\#”轉(zhuǎn)義需要顯示“#”的地方。

顯示原始數(shù)據(jù)

顯示數(shù)據(jù)的本來的形式是使用模板的一個最基本的用法,使用 Kendo UI 模板,可以使用如下類似的代碼:


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

上面代碼創(chuàng)建了“編譯”過的嵌入式模板,使用這個模板可以用來顯示數(shù)據(jù),比如下面的代碼

<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>

通過模板與數(shù)據(jù)的合并,最終顯示“Todd”。

顯示 HTML 數(shù)據(jù)

如果你需要顯示經(jīng)過 HTML 編碼過的數(shù)據(jù),使用 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>

而不是 Todd,如果需要顯示 Todd ,則需要使用#= # 語法,顯示 HTML 編碼的一個主要作用是當你無需再模板中顯示 HTML 標記,而是把整個標記和其內(nèi)容作為字符串顯示出來。

使用外部模板和表達式 在模板中也可以使用表達式,Kendo UI 支持者模板中執(zhí)行 JavaScript 代碼,在模板中使用 JavaScript 代碼的方法是在 JavaScript 語句的前后加上#,比如下面模板顯示一組列表:


<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.length; i++) { #
    <li>#= data[i] #</li>
# } #
</ul>
</script>

然后為了使用這個模板,可以通過模板的 id ,通過 kendo.template 創(chuàng)建這個模板,然后和數(shù)據(jù)合并,比如:

<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 selector
    var template = kendo.template($("#javascriptTemplate").html());

    //Create some dummy data
    var data = ["Todd", "Steve", "Burke"];

    var result = template(data); //Execute the template
    $("#example").html(result); //Append the result
</script>

可以看到模板執(zhí)行了 JavaScipt 的 for 循環(huán),并且我們使用了外部模板,外部模板的定義使用 type=”text/x-kendo-template”來定義,并通過其id來訪問這個外表模板。 在模板中也可以定義變量,使用這個自定義變量的方法和使用字面量的方法類似。比如定義一個變量 myCustomVariable


<script id="javascriptTemplate" type="text/x-kendo-template">
    # var myCustomVariable = "foo"; #
    <p>
        #= myCustomVariable #
    </p>
</script>

嵌入式模板 vs 外部模板

Kendo UI 模板可以使用嵌入式模板和外部模板:

  • inline: 使用 JavaScript 字符串定義
  • external: 使用 HTML Script 塊定義

嵌入式模板使用比較簡單的情況,對于比較復雜的模板一般使用外部模板。外部模板的定義的基本格式如下:


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

外部模板必須定義一個 id,這樣你才可以通過 id 來訪問這個模板:


//extract the template content from script tag
var templateContent = $("#myTemplate").html(); 
//compile a template
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 data
    var 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>

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號