KendoUI框架提供了一個(gè)易用，高性能的JavaScript模板引擎。通過(guò)模板可以創(chuàng)建一個(gè)HTML片段然后可以和JavaScript數(shù)據(jù)合并成最終的HTML元素。Kendo 模板側(cè)重于UI顯示，支持關(guān)鍵的模板功能，著重于性能而不是語(yǔ)法上的方便。

 

 

模板語(yǔ)法

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

用三種方式使用#語(yǔ)法：

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

 

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

 

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

顯示數(shù)據(jù)的本來(lái)的形式是使用模板的一個(gè)最基本的用法，使用Kendo UI模板，可以使用如下類似的代碼：

var template = kendo.template(“<div id=’box’>#= firstName #</div>”)

上面代碼創(chuàng)建了“編譯”過(guò)的嵌入式模板，使用這個(gè)模板可以用來(lái)顯示數(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 datato the compiled template

$(“#example”).html(result); //display the result

</script>

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

 

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

如果你需要顯示經(jīng)過(guò)HTML編碼過(guò)的數(shù)據(jù)，使用Kendo UI模板可以自動(dòng)處理這些編碼過(guò)的HTML元素，但需要使用不同的語(yǔ)法 #: ?#,例如：

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 thedata to the compiled template

$(“#example”).html(result); //display the resulting encoded HTML Output(<b>Todd</b>)

</script>

這個(gè)例子的顯示結(jié)果為：

<b>Todd </b>

而不是 Todd，如果需要顯示Todd ，則需要使用#= # 語(yǔ)法，顯示HTML編碼的一個(gè)主要作用是當(dāng)你無(wú)需再模板中顯示HTML標(biāo)記，而是把整個(gè)標(biāo)記和其內(nèi)容作為字符串顯示出來(lái)。

 

使用外部模板和表達(dá)式

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

<script id=“javascriptTemplate” type=“text/x-kendo-template”>

<ul>

# for (var i = 0; i < data.length; i++){ #

<li>#= data[i] #</li>

# } #

</ul>

</script>

然后為了使用這個(gè)模板，可以通過(guò)模板的id ,通過(guò)kendo.template 創(chuàng)建這個(gè)模板，然后和數(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 definitionusing a jQuery selector

var template = kendo.template($(“#javascriptTemplate”).html());

 

//Create some dummy data

var data = [“Todd”, “Steve”, “Burke”];

 

var result = template(data); //Execute thetemplate

$(“#example”).html(result); //Append the result

</script>

 

可以看到模板執(zhí)行了JavaScipt的for 循環(huán)，并且我們使用了外部模板，外部模板的定義使用type=?text/x-kendo-template?來(lái)定義，并通過(guò)其id來(lái)訪問這個(gè)外表模板。

在模板中也可以定義變量，使用這個(gè)自定義變量的方法和使用字面量的方法類似。比如定義一個(gè)變量myCustomVariable：

<script id=“javascriptTemplate” type=“text/x-kendo-template”>

# var myCustomVariable = “foo”; #

<p>

#= myCustomVariable #

</p>

</script>

 

嵌入式模板 vs 外部模板

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

• inline: 使用JavaScript字符串定義

• external: 使用HTML Script塊定義