jQuery 模板引擎 - jTemplates - Programming Design Notes

大家有沒有將 JSON 數據顯示給用戶的經驗？如果數據不是太複雜，在 Javascript 新增 HTML 元件，然後一個一個堆砌起來，最後再將堆砌好的元件放到 HTML 中顯示出來，就好像以下例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
        </script>
        <script src="jquery-jtemplates.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
                var data = {
                    users: [{
                        firstName: 'Lawrence',
                        lastName: 'Cheung'
                    }, {
                        firstName: 'Becky',
                        lastName: 'Choy'
                    }, {
                        firstName: 'John',
                        lastName: 'Chan'
                    }, {
                        firstName: 'Tom',
                        lastName: 'Ku'
                    }]
                };
                
                var $userList = $("#user-list");
                $.each(data.users, function(index, user){
                    $("<li>").text("First Name: " + user.firstName + ", Last Name: " + user.lastName).appendTo($userList);
                });
      
            });
        </script>
        <title>Sample</title>
    </head>
    <body>
        <ul id="user-list">
        </ul>
    </body>
</html>

但如果有大量不同數據或數據的設計複雜起來，例子:
例子轉自: http://www.json.org/example.html

{"web-app": {
  "servlet": [   
    {
      "servlet-name": "cofaxCDS",
      "servlet-class": "org.cofax.cds.CDSServlet",
      "init-param": {
        "configGlossary:installationAt": "Philadelphia, PA",
        "configGlossary:adminEmail": "[email protected]",
        "configGlossary:poweredBy": "Cofax",
        "configGlossary:poweredByIcon": "/images/cofax.gif",
        "configGlossary:staticPath": "/content/static",
        "templateProcessorClass": "org.cofax.WysiwygTemplate",
        "templateLoaderClass": "org.cofax.FilesTemplateLoader",
        "templatePath": "templates",
        "templateOverridePath": "",
        "defaultListTemplate": "listTemplate.htm",
        "defaultFileTemplate": "articleTemplate.htm",
        "useJSP": false,
        "jspListTemplate": "listTemplate.jsp",
        "jspFileTemplate": "articleTemplate.jsp",
        "cachePackageTagsTrack": 200,
        "cachePackageTagsStore": 200,
        "cachePackageTagsRefresh": 60,
        "cacheTemplatesTrack": 100,
        "cacheTemplatesStore": 50,
        "cacheTemplatesRefresh": 15,
        "cachePagesTrack": 200,
        "cachePagesStore": 100,
        "cachePagesRefresh": 10,
        "cachePagesDirtyRead": 10,
        "searchEngineListTemplate": "forSearchEnginesList.htm",
        "searchEngineFileTemplate": "forSearchEngines.htm",
        "searchEngineRobotsDb": "WEB-INF/robots.db",
        "useDataStore": true,
        "dataStoreClass": "org.cofax.SqlDataStore",
        "redirectionClass": "org.cofax.SqlRedirection",
        "dataStoreName": "cofax",
        "dataStoreDriver": "com.microsoft.jdbc.sqlserver.SQLServerDriver",
        "dataStoreUrl": "jdbc:microsoft:sqlserver://LOCALHOST:1433;DatabaseName=goon",
        "dataStoreUser": "sa",
        "dataStorePassword": "dataStoreTestQuery",
        "dataStoreTestQuery": "SET NOCOUNT ON;select test='test';",
        "dataStoreLogFile": "/usr/local/tomcat/logs/datastore.log",
        "dataStoreInitConns": 10,
        "dataStoreMaxConns": 100,
        "dataStoreConnUsageLimit": 100,
        "dataStoreLogLevel": "debug",
        "maxUrlLength": 500}},
    {
      "servlet-name": "cofaxEmail",
      "servlet-class": "org.cofax.cds.EmailServlet",
      "init-param": {
      "mailHost": "mail1",
      "mailHostOverride": "mail2"}},
    {
      "servlet-name": "cofaxAdmin",
      "servlet-class": "org.cofax.cds.AdminServlet"},
 
    {
      "servlet-name": "fileServlet",
      "servlet-class": "org.cofax.cds.FileServlet"},
    {
      "servlet-name": "cofaxTools",
      "servlet-class": "org.cofax.cms.CofaxToolsServlet",
      "init-param": {
        "templatePath": "toolstemplates/",
        "log": 1,
        "logLocation": "/usr/local/tomcat/logs/CofaxTools.log",
        "logMaxSize": "",
        "dataLog": 1,
        "dataLogLocation": "/usr/local/tomcat/logs/dataLog.log",
        "dataLogMaxSize": "",
        "removePageCache": "/content/admin/remove?cache=pages&id=",
        "removeTemplateCache": "/content/admin/remove?cache=templates&id=",
        "fileTransferFolder": "/usr/local/tomcat/webapps/content/fileTransferFolder",
        "lookInContext": 1,
        "adminGroupID": 4,
        "betaServer": true}}],
  "servlet-mapping": {
    "cofaxCDS": "/",
    "cofaxEmail": "/cofaxutil/aemail/*",
    "cofaxAdmin": "/admin/*",
    "fileServlet": "/static/*",
    "cofaxTools": "/tools/*"},
 
  "taglib": {
    "taglib-uri": "cofax.tld",
    "taglib-location": "/WEB-INF/tlds/cofax.tld"}
  }
}

這樣複雜的數據要用 Javascript 堆砌 HTML 會變得很複雜，堆砌 HTML 元件會變得很混亂又不直覺化，而且以後去改變設計亦變得很困難，這時候我們可以用模板工具去幫助我們。

今次介紹的 - jTamplates 是現時比較多功能的一款模板工具(需要配合 jQuery 一起使用)，而且語法和 PHP 模板引擎 - Smarty 很相似，有使用過的朋友應該很快上手。

External Templates - 可以經由外部網頁載入模板
External Data - 可以經由外部網頁載入數據
Live Refresh - 每隔一斷時間重新更新資料
HTML Encoding - 防止被惡意加入 HTML 程式碼
Includes - 可在模板載中入其他模板

jTemplates 官方網址: http://jtemplates.tpython.com/
下載: Download

簡單的示範:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
        </script>
        <script src="jquery-jtemplates.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
                var data = {
                    users: [{
                        firstName: 'Lawrence',
                        lastName: 'Cheung'
                    }, {
                        firstName: 'Becky',
                        lastName: 'Choy'
                    }, {
                        firstName: 'John',
                        lastName: 'Chan'
                    }, {
                        firstName: 'Tom',
                        lastName: 'Ku'
                    }]
                };
                
                // attach the template
                $("#user-list").setTemplateElement("template");
            
                // process the template
                $("#user-list").processTemplate(data);

            });
        </script>
        <title>jTemplates Sample</title>
    </head>
    <body>
        <ul id="user-list">
        </ul>
        <textarea id="template" cols="0" rows="0" style="display:none;">
            <!--
            {#template MAIN}
             {#foreach $T.users as user}
              <li>First Name: {$T.user.firstName}, Last Name: {$T.user.lastName}</li>
             {#/for}
            {#/template MAIN}
            -->
        </textarea>
    </body>
</html>

首先 jTamplates 的模板必須放在 textarea 內，因為模板還未有數據，所以加上了 style=”display:none;” 令使用者看不到。

{#template MAIN}
......
{#/template MAIN}

內裡放了模板的主體，在模板內可以使用 HTML 元件。

{#foreach $T.users as user}
...
{#/for}

這裡的 $T 表示資料，還有 $P 和 $Q，分別代表參數和 XHTML 元件的屬性，遲點會在另一篇詳細說明。
這個 foreach 是將 data.users 放到 user 這個變數內，和

$.each(data.users, function(index, user){
//....
});

功能一樣，就是將 users 這個陣列由頭到尾走一次。

<li>First Name: {$T.user.firstName}, Last Name: {$T.user.lastName}</li>

這個便是需要顯示出來的數據，因為之後會將資料使用 ul 元件去顯示出來，所以這裡使用了 li 元件。
記得使用資料是要加上 $T。

$("#user-list").setTemplateElement("template");

這個是將 ul#user-list 這個元件設定使用那一個模版。

$("#user-list").processTemplate(data);

設定 ul#user-list 使用那一組資料，並將資料顯示出來。

相關書籍:

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

Programming Design Notes

jQuery 模板引擎 - jTemplates

About Me

Recent Posts

Recent Comments