Fork me on GitHub

Programming Design Notes

jQuery 模板引擎 - jTemplates

| Comments

大家有沒有將 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": "ksm@pobox.com",
"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 1.4 Reference GuidejQuery in Action, Second EditionjQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)