當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Kendo UI开发教程：Kendo UI模板概述

發布時間：2023/12/19 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Kendo UI开发教程：Kendo UI模板概述小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

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

上面代碼創建了“編譯”過的嵌入式模板，使用這個模板可以用來顯示數據，比如下面的代碼：

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>”);

完整的示例如下：

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語句的前后加上#，比如下面模板顯示一組列表：

<ul>

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

# } #

</ul>

</script>

然后為了使用這個模板，可以通過模板的id ,通過kendo.template 創建這個模板，然后和數據合并，比如：

<ul>

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

# } #

</ul>

</script>

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

# var myCustomVariable = “foo”; #

<p>

#= myCustomVariable #

</p>

</script>

嵌入式模板 vs 外部模板

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

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

本文轉載自Kendo UI中文網

轉載于:https://my.oschina.net/u/2317468/blog/785986

總結

以上是生活随笔為你收集整理的Kendo UI开发教程：Kendo UI模板概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：逻辑java练习_逻辑结构常见练习 Ja
下一篇： java workerdone_【架构】