Kendo UI开发教程：Kendo UI模板概述
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
Kendo UI框架提供了一個易用，高性能的JavaScript模板引擎。通過模板可以創(chuàng)建一個HTML片段然后可以和JavaScript數(shù)據(jù)合并成最終的HTML元素。Kendo 模板側(cè)重于UI顯示，支持關(guān)鍵的模板功能，著重于性能而不是語法上的方便。
模板語法
Kendo模板使用了一種稱為“#”的語法形式，使用這種語法，#用來表明模板中的某個部分可以使用JavaScript數(shù)據(jù)來替代。
用三種方式使用#語法：
注意：如何你的模板中包含有“#”字符，不是用來綁定的部分，你必須使用轉(zhuǎn)義字符，否則會引起模板編譯錯誤。 你可以通過“\\#?轉(zhuǎn)義需要顯示“#”的地方。
顯示原始數(shù)據(jù)
顯示數(shù)據(jù)的本來的形式是使用模板的一個最基本的用法，使用Kendo UI模板，可以使用如下類似的代碼：
| 1 | var template = kendo.template(“<div id="’box’">#= firstName #</div>”) |
上面代碼創(chuàng)建了“編譯”過的嵌入式模板，使用這個模板可以用來顯示數(shù)據(jù)，比如下面的代碼：
| 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> |
通過模板與數(shù)據(jù)的合并，最終顯示“Todd”。
顯示HTML數(shù)據(jù)
如果你需要顯示經(jīng)過HTML編碼過的數(shù)據(jù)，使用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> |
這個例子的顯示結(jié)果為：
| 1 | <b>Todd </b> |
而不是?Todd，如果需要顯示Todd?，則需要使用#= # 語法，顯示HTML編碼的一個主要作用是當(dāng)你無需再模板中顯示HTML標(biāo)記，而是把整個標(biāo)記和其內(nèi)容作為字符串顯示出來。
使用外部模板和表達(dá)式
在模板中也可以使用表達(dá)式，Kendo UI 支持者模板中執(zhí)行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 創(chuàng)建這個模板，然后和數(shù)據(jù)合并，比如：
| 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> |
可以看到模板執(zhí)行了JavaScipt的for 循環(huán)，并且我們使用了外部模板，外部模板的定義使用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塊定義
本文轉(zhuǎn)載自Kendo UI中文網(wǎng)
轉(zhuǎn)載于:https://my.oschina.net/u/2317468/blog/785986
總結(jié)
以上是生活随笔為你收集整理的Kendo UI开发教程：Kendo UI模板概述的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 逻辑java练习_逻辑结构常见练习 Ja
- 下一篇： 机器学习自主解决安全威胁离我们还有多远？