Kendo UI開發教程 7 Kendo UI 模板概述
阿新 • • 發佈：2018-11-08
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
Kendo UI 框架提供了一個易用，高效能的JavaScript模板引擎。通過模板可以建立一個HTML片段然後可以和JavaScript資料合併成最終的HTML元素。
Kendo 模板側重於UI顯示，支援關鍵的模板功能，著重於效能而不是語法上的方便。
模板語法
Kendo 模板使用了一種稱為“#”的語法形式，使用這種語法，#用來表明模板中的某個部分可以使用JavaScript資料來替代。
用三種方式使用#語法：
- 顯示字面量 #=#
- 顯示HTML元素 #：#
- 執行任意的Javascript程式碼 #if() {# …#}#
注意：如何你的模板中包含有“#”字元，不是用來繫結的部分，你必須使用轉義字元，否則會引起模板編譯錯誤。 你可以通過“\\#”轉義需要顯示“#”的地方。
顯示原始資料
顯示資料的本來的形式是使用模板的一個最基本的用法，使用Kendo UI模板，可以使用如下類似的程式碼：
1 |
var template = kendo.template("<div id='box'>#= firstName #</div>") |
上面程式碼建立了“編譯”過的嵌入式模板，使用這個模板可以用來顯示資料，比如下面的程式碼
1 |
<div id="example"></div> |
2 |
<script> |
3 |
var template = kendo.template("<div id='box'>#= firstName #</div>"); |
4 |
var data = { firstName: "Todd" }; //A value in JavaScript/JSON |
5 |
var result = template(data); /Pass the data to the compiled template |
6 |
$("#example").html(result); //display the result |
7 |
</script> |
通過模板與資料的合併，最終顯示“Todd”。
顯示HTML資料
如果你需要顯示經過HTML編碼過的資料，使用Kendo UI模板可以自動處理這些編碼過的HTML元素，但需要使用不同的語法 #: …#,例如：
1 |
var template = kendo.template("<div id='box'>#: firstName #</div>"); |
完整的示例如下：
1 |
<div id="example"></div> |
2 |