jtemplate 爲javascript前端html模版引擎

時間 2019-11-24

標籤 jtemplate javascript 前端 html 模版引擎欄目 JavaScript 简体版

原文原文鏈接

最近的項目中用到了jtemplate, 它是客戶端基於javascript的模板引擎，綁定的數據爲json對象。之前我在頁面上顯示數據列表時最喜歡用Repeater控件了，由於它相對與其它幾個服務端控件是最輕量級了，並且佈局也最靈活，不過它終究是服務端控件在性能上是有損失的，對於性能要求很高的站點，連它也不讓用，那麼開發人員一般的作法是在服務端把html代碼生成好再一次性輸出到客戶端，這樣性能是提升了一些但想一想服務端一大堆的html代碼又該頭痛了。而如今有了jtemplate問題就能很完美的解決了，服務端只須要把對象集合序列化成json格式並傳入客戶端，客戶端再把json對象填充模版生成列表，這樣一服務端傳輸的只是json格式的字符串，傳輸的數據量但是大大減小了，二遍歷綁定的工做轉移到了客戶端，大大減輕了服務端的壓力。javascript

上面說了它的好處，下面該說說怎麼用它了，仍是拿數據列表來舉例吧。html

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

須要注意的是，jtemplate是在jquery的基礎上實現的，因此腳本的引入順序不能顛倒，不然會報錯。jquery

這些腳本可到http://jtemplates.tpython.com/去下載。json

2. 而後建模版：瀏覽器

<div id="result_container"></div>dom

<textarea id="template-items" style="display:none">佈局

　　<table border="1" style="border-collapse:collapse">性能

  <tr><th>姓名</th><th>郵箱</th><th>生日</th></tr>
     {#foreach $T as item}
   <tr>
    　　<td>{$T.item.name}</td>
    　　<td>{$T.item.mail}</td>
          <td>{$T.item.birthday}</td>
   </tr>
   {#/for}
  </table>
</textarea>

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

3. 用json數據填充模板並展現

// 填充數據並展現
$("#result_container").processTemplate(data);

　　　//這裏也能夠寫成$("#result_container").setTemplateElement("template-items").processTemplate(data);
</script>

這樣就算完成了，一個數據列表就呈現出來了：

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）註釋模版中的內容，如模版改爲：

<textarea id="template-items" style="display:none">
    
</textarea>

　　在IE下的效果以下圖：

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

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

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

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

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

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

7. 上面舉得列子是如何使用jtemplate綁定一個簡單的數據列表，但其實jtemplate能夠綁定任意json對象，以及還有不少使用方法，你們能夠經過http://jtemplates.tpython.com/去了解

---------------------------------------------------------------------------------------

Templates是javascript的模板引擎,基於jquery的插件。官方網址：http://jtemplates.tpython.com/

數據準備：

var data ={
TotalCount:64,
Lists:[
{Id:'2001' ,Title:'新聞11',CreateDate:'2011-08-08'},
{Id:'2002' ,Title:'新聞22',CreateDate:'2011-08-08'},
{Id:'2003' ,Title:'新聞33',CreateDate:'2011-08-08'},
{Id:'2004' ,Title:'新聞44',CreateDate:'2011-08-08'},
{Id:'2005' ,Title:'新聞55',CreateDate:'2011-08-08'},
]
}

一、引入庫文件

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script>

二、編寫模板

<div id="result"></div>
<div id="templateContainer" style="display:none;">
<table>
<tr><td>Id</td><td>標題</td><td>發佈時間</td></tr>
{#foreach $T.table as row}
<tr><td>{$T.row.Id}</td><td>{$T.row.Title}</td><td>{$T.row.CreateDate}</td></tr>
{#/for}
</table>
</div>

語法：

一、 大括號{..} ，在這裏面能夠寫任何javascript的代碼，好比 {$T.toUpperCase()}

二、 {$T} : 表示數據，例如上面的例子，$T.table表示獲得data的table對象，$T.TotalCount 爲 64。

三、 {#foreach} : 循環獲取數據，如上面：{#foreach $T.table as row} {$T.row.Title} {/for}

擴展語法：

{#if}

例子：

{#if $T=="true"} good {#else} fail {#/if}

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

{#foreach}

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

例子：

a、輸出全部數據：

{#foreach $T.table as row}      {$T.row.Title}      {/for}

b、從第二條記錄開始輸出：

{#foreach $T.table as row begin=1}      {$T.row.Title}      {/for}

c、從第二條開始且只取2條

{#foreach $T.table as row begin=1 count=2}      {$T.row.Title}      {/for}

d、使用step

{#foreach $T.table as row step=2}      {$T.row.Title}      {/for}

e、使用else

{#foreach $T.table as row step=2}      {$T.row.Title}  {#else}   無記錄   {/for}

{#for}

例子：

{#for index = 1 to 10} {$T.index} {#/for}

{#for index = 1 to 10 step=3} {$T.index} {#/for}

三、渲染模板並展現

<script type="text/javascript"> 
		$(document).ready(function() {
			// 設置模板
			$("#result").setTemplateElement("templateContainer");
			
			// 處理模板
			$("#result").processTemplate(data);
		});	
	</script>

設置模板的幾種方法：

a. setTemplateElement:參數爲頁面中的一個元素ID

如上面的例子

b. setTemplate: 參數爲具體的模板內容，

如：$("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");

c.setTemplateURL:使用外部獨立模板文件Url做爲參數

如：$("#result").setTemplateURL("example_multitemplate1.tpl");

四、運行結果：

完整代碼

<html> 
<head> 

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="jquery-jtemplates.js"></script>

    <title>jTemplates</title>

    <script type="text/javascript"> 
        var data ={
                TotalCount:64,
                Lists:[
                    {Id:'2001' ,Title:'新聞11',CreateDate:'2011-08-08'},
                    {Id:'2002' ,Title:'新聞22',CreateDate:'2011-08-08'},
                    {Id:'2003' ,Title:'新聞33',CreateDate:'2011-08-08'},
                    {Id:'2004' ,Title:'新聞44',CreateDate:'2011-08-08'},
                    {Id:'2005' ,Title:'新聞55',CreateDate:'2011-08-08'},
                ]
        };
		$(document).ready(function() {
			// 設置模板
			$("#result").setTemplateElement("templateContainer");
			
			// 處理模板
			$("#result").processTemplate(data);
		});	
    </script>

</head>
<body>
    <div id="result">
    </div>
    <textarea id="templateContainer" style="display: none;">
        <table border="1">
            <tr>
                <td>
                    Id
                </td>
                <td>
                    標題
                </td>
                <td>
                    發佈時間
                </td>
            </tr>
            {#foreach $T.Lists as row}
            <tr>
                <td>
                    {$T.row.Id}
                </td>
                <td>
                    {$T.row.Title}
                </td>
                <td>
                    {$T.row.CreateDate}
                </td>
            </tr>
            {#/for}
        </table>
    </textarea>
</body>
</html>