Jquery 引擎模板 -template詳解

本文轉載自查看原文 2018-01-24 11:02 3837

一、1、jTemplate簡介

jTemplates是一個基於Jquery的js模板引擎插件。該引擎全部代碼由JS實現，可以配合AJAX,JSON一起協同工作，模板內容可以用JS代碼，實現了活動更新，可以自動從服務器更新模板生成的內容。 </p><p><span style="white-space:pre"></span>使用jTemplates,<span style="font-family:arial; font-size:13px; line-height:18px">服務端只需要把對象集合序列化成json格式並傳入客戶端，客戶端再把json對象填充模版生成列表，這樣一服務端傳輸的只是json格式的字符串，傳輸的數據量可是大大減少了，二遍歷綁定的工作轉移到了客戶端，大大減輕了服務端的壓力。

jTemplates能免費應用於商業和非商業。下載地址：http://jtemplates.tpython.com，實例介紹：

[javascript] view plain copy

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//初始化JSON數據
var data = {
name: '用戶列表',
list_id: '編號89757',
table: [
{id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},
{id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},
{id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},
{id: 4, name: '戲戲', age: 26, mail: 'cssrain@domain.com'},
{id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}
]
};
// 附上模板
$("#result1").setTemplateElement("template");
// 給模板加載數據
$("#result1").processTemplate(data);
});
</script>

<th>姓

<table>

<tr>

名</th>

    </tr>

{#foreach $T.table as record}

<tr>

<td>{$T.record.id}</td>

<td>{$T.record.name}</td>

<td>{$T.record.age}</td>

      <td>{$T.record.mail}</td>  
    </tr>

    {#/for}  
   </table>  
</textarea

具體步驟：

1、要使用jtemplate首先要引入兩個js腳本文件：

需要注意的是，jtemplate是在jquery的基礎上實現的，所以腳本的引入順序不能顛倒，否則會報錯

2、. 然后建模版：

{#foreach $T as item}

<tr>

<td>{$T.item.birthday}</td>

</tr>

{#/for}

</table>

</textarea>

這就是jtemplate模版的格式，模版內容是放在textarea里的，而關鍵字和數據是用大括號包起來的，並且以$T表示數據，關鍵字以#作為開始標記。

3、用json數據填充模板並展示：

var data = [{ name: 'Anne', birthday: '2001-01-01', mail: 'anne@domain.com' },

{ name: 'Amelie', birthday: '2002-02-02', mail: 'amelie@domain.com' },

{ name: 'Polly', birthday: '2003-03-03', mail: 'polly@domain.com' },

{ name: 'Alice', birthday: '2004-04-04', mail: 'alice@domain.com' },

{ name: 'Martha', birthday: '2005-05-05', mail: 'martha@domain.com'}]

// 設置模版

$("#result_container").setTemplateElement("template-items");

// 填充數據並展示

$("#result_container").processTemplate(data);

　　　//這里也可以寫成$("#result_container").setTemplateElement("template-items").processTemplate(data);

</script>

4、結果顯示：

5、其他形式：調用JavaScript

在｛｝里你是可以隨意寫javascript腳本的，如生日我想換種格式顯示，顯示成2001/01/01,那么我們可以把模版中的{$T.item.birthday}改成{$T.item.birthday.replace(/-/g,'/')}，然后刷新下效果如下：

當然也可以把它包裝成方法來調用，如先定義js方法：

function formatDate(date) {

return date.replace(/-/g,'/');

}

再把模版改成{formatDate($T.item.birthday)}就可以達到一樣的效果了。

6、在模版中包含textarea輸入框

jtemplate的模版內容是放在textarea里面的，可是有時我們要在模版里包含textarea, 有兩種方法可以實現：

　　1）注釋模版中的內容，如模版改成：

<!--

{#foreach $T as item}

<tr>

<td>{$T.item.birthday}</td>

</tr>

{#/for}

</table>

-->

</textarea>

　　在IE下的效果如下圖：

但在其它瀏覽器下(本人測試過的瀏覽器有360，谷歌，火狐)卻顯示不出來。

2）移除注釋並使用特殊符號的編碼表示包含的textarea中的特殊標簽

如把<textarea rows="2" cols="10"></textarea>替換成<textarea rows="2" cols="10"> </textarea>

這樣這些主流瀏覽器都能正常顯示了。

jemplate支持大於號>和小於號<的編碼，但卻不支持大括號｛｝的編碼，比如想在模版中使用my97datepicker日期控件，

它的參數是一個json對象是有大括號的，如果直接這樣放入模版中是得不到想要的效果的，但也有變通的方式，如把onclick事件寫到模版外面去

2、語法分析：

　　　jTemplates包含三個預定全局變量，分別是$T、$P、$Q。$T為模板提供數據調用功能，$P為模板提供參數變量調用功能，$Q.version提供當前jTemplate的版本

　　jTemplates還支持#if、#for、#cycle、#foreach、#include、#param標簽，幫助你處理實現復雜的業務情形。

#if 語法

{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}

#if 示例:

{#if $T.hello} hello world. {#/if}

{#if 2*8==16} good {#else} fail {#/if}

{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}

{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

#for 語法

{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}

或

{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}

#for 示例：

默認步長：{#for index = 1 to 10} {$T.index} {#/for}

正向步長：{#for index = 1 to 10 step=3} {$T.index} {#/for}

負向步長及空循環：{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}

也可以在循環中使用變量：{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}

說明：{#else}是在{#for...}未能執行的時的輸出內容。

#foreach 語法

{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

#foreach 示例：

默認：{#foreach $T.table as record} {$T.record.name} {#/for}

指定起始位置：{#foreach $T.table as record begin=1} {$T.record.name} {#/for}

指定起始和循環次數：{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}

指定步長：{#foreach $T.table as record step=2} {$T.record.name} {#/for}

#foreach 內定環境變量：

$index - index of element in table

$iteration - id of iteration (next number begin from 0)

$first - is first iteration?

$last - is last iteration?

$total - total number of iterations

$key - key in object (name of element) (0.6.0+)

$typeof - type of element (0.6.0+)

#foreach 示例所需要的數據：

var data = {

name: 'User list',

list_id: 4,

table: [

{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},

{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},

{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},

{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},

{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}

(

;0.7.0+)版以后新增的功能，支持待循環集合用函數代替：

{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

例：

f = function(step) {

if(step > 100) return null; // stop if loop is too long

return "Step " + step;

};

"#result").setTemplate("{#foreach f as funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}");

$
(

("#result").processTemplate();

foreach在每次循環時請求的就是f函數，然后傳遞參數給f使用，並返回結果給funcValue變量

#cycle 語法

{#cycle values=|ARRAY|}

功能：提供周期性的調用，在循環中實現交替樣式功能時可用到

示例：

cle values=[1,2,3,4]}

{#c

面模板在執行循環時，就會周期性的調用#cycle數組中的值，這樣就能實現行交替的效果:

下<table width=\"200\">

{#foreach $T.table as row}

<td>{$T.row.name.link('mailto:'+$T.row.mail)}</td>

</tr>

{#/for}

</table>

#include 語法

{#include |NAME| [root=|VAR|]}

功能：提供子模板調用

示例：

mplate MAIN} {

{#t

e* this is comment *}

{$T} {* $T == $T.toSource() *}

<table>

{#foreach $T.table as record}

{#include ROW root=$T.record}

{#/for}

</table>

{#/template MAIN}

{#template ROW}

<td>{$T.mail}</td>

</tr>

{#/template ROW}

說明：{#template MAIN} 是指定模板的主要部分，必不可少。

{#template ROW}是定義一個名為“ROW”的子模板。

=$T.record}是主模板調用“ROW”子模板，並傳遞參數$T.record

{#include ROW roo

#param 語法

{#param name=|NAME| value=|CODE|}

功能：定義模板內的局部變量參數，使用$P調用。

示例：

"#result").setTemplate("{#param name=x value=888}{$P.x}");

(

("#result").processTemplate();

出結果：888

輸

例：

示$("#result").setTemplate("{#param name=x value=$P.x+1}{$P.x}");

$("#result").setParam('x', 777);

$("#result").processTemplate();

輸出結果：778

示例：

$("#result").setTemplate("<ul>{#foreach $T.table as row}<li>{$P.x} {$T.row.name}</li>{#param name=x value=$P.x+3}{#/for}<ul>");

$("#result").setParam('x', 1);

$("#result").processTemplate(data);

需要數據：

var data = {

name: 'User list',

list_id: 4,

table: [

{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},

{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},

{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},

{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},

{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}

]

輸

}

;出結果：

# 1 Anne

# 4 Amelia

# 7 Polly

# 10 Alice

# 13 Martha

jTemplate適用於少量數據，數據量較大時建議使用XML。

技術歷程（參考：http://www.cnblogs.com/leixiao/p/3280804.html、http://www.cnblogs.com/gotoschool/archive/2013/03/11/2954135.html）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 art-template引擎模板 Node 使用模板引擎art-template js模板引擎template-web的簡單使用 Art-Template模板引擎（原生寫法與簡潔寫法） js模板引擎art-template使用方法七. 模板引擎的使用(template-web.js的使用) 數據渲染模板引擎，template-web的使用模板引擎——jquery.tmpl.js javascript/jquery模板引擎——Handlebars初體驗 Template模板