Kendo UI開發教程：Kendo UI模板概述

Kendo UI框架提供了一個易用，高性能的JavaScript模板引擎。經過模板能夠建立一個HTML片斷而後能夠和JavaScript數據合併成最終的HTML元素。Kendo 模板側重於UI顯示，支持關鍵的模板功能，着重於性能而不是語法上的方便。

模板語法

Kendo模板使用了一種稱爲「#」的語法形式，使用這種語法，#用來代表模板中的某個部分可使用JavaScript數據來替代。

用三種方式使用#語法：

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

注意：如何你的模板中包含有「#」字符，不是用來綁定的部分，你必須使用轉義字符，不然會引發模板編譯錯誤。 你能夠經過「\\#?轉義須要顯示「#」的地方。

顯示原始數據

顯示數據的原本的形式是使用模板的一個最基本的用法，使用Kendo UI模板，可使用以下相似的代碼：

1	var template = kendo.template(「<div id="’box’">#= firstName #</div>」)

上面代碼建立了「編譯」過的嵌入式模板，使用這個模板能夠用來顯示數據，好比下面的代碼：

1 2 3 4 5 6 7

<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元素，但須要使用不一樣的語法 #: ?#,例如：

1	var template = kendo.template(「<div id="’box’">#: firstName #</div>」);

完整的示例以下：

1 2 3 4 5 6 7

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

這個例子的顯示結果爲：

1	<b>Todd </b>

而不是 Todd，若是須要顯示Todd ，則須要使用#= # 語法，顯示HTML編碼的一個主要做用是當你無需再模板中顯示HTML標記，而是把整個標記和其內容做爲字符串顯示出來。

使用外部模板和表達式

在模板中也可使用表達式，Kendo UI 支持者模板中執行JavaScript代碼，在模板中使用JavaScript代碼的方法是在JavaScript語句的先後加上#，好比下面模板顯示一組列表：

1 2 3 4 5 6 7

<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 建立這個模板，而後和數據合併，好比：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

能夠看到模板執行了JavaScipt的for 循環，而且咱們使用了外部模板，外部模板的定義使用type=?text/x-kendo-template?來定義，並經過其id來訪問這個外表模板。

在模板中也能夠定義變量，使用這個自定義變量的方法和使用字面量的方法相似。好比定義一個變量myCustomVariable：

1 2 3 4 5 6

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

嵌入式模板 vs 外部模板

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

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

本文轉載自Kendo UI中文網