本文和《【JavaScript】兼容IE6的JS模板化》(点击打开链接)是姊妹篇,鉴于现在javascript已经开始不受待见,甚至已经开始被当作后端语言,被事做extJS,NodeJs等,前端基本上都用jQuery实现的趋势,因此也就有了本文。毕竟javascript取个变量,document.getElementById实在是太长和被人诟病了!
同样是现实前端模板化,告别用前端语言写Ajax处理json数据与样式的杂糅!
一、jTemplates的下载、安装、配置
1、同样,配置这些前端组件没什么好说,说白了其实就是下载一个js文件而已。打开jTemplates的官网:http://jtemplates.tpython.com/,一个极其朴素,但实用打开迅速的网站。选择Download,然后下载一个压缩版。
2、然后放到你的网站目录,同时放一个不算太旧的jQuery,我这里选用了国内最常用的jQuery-1.8.3。
3、然后你写如下的HTML代码
<!DOCTYPE html>
<html>
<head>
<title>jTemplates</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-jtemplates.js"></script>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
$("#result").setTemplate("Template by {$T.bold()} version <em>{Template.version}</em>.");
$("#result").processTemplate("jTemplates");
</script>
</body>
</html>
当你看到浏览器现实当前jTemplates版本则证明配置成功了。
这里唯一注意,jquery-1.8.3.min.js的引用必须在jquery-jtemplates.js之前,jQuery组件都这样的,老生常谈了。
二、jTemplates的使用
1、顺序结构
具体看如下代码。
<!DOCTYPE html>
<html>
<head>
<title>jTemplates</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-jtemplates.js"></script>
</head>
<body>
<div id="result"><!--指明要被模板化的段落,给一个id-->
<textarea id="template" style="display:none">
<h1>姓名:{$T.name},年龄:{$T.age}</h1>
</textarea>
</div>
</body>
<script>
var data = {
name: "Anne",
age: "20"
};//所有数据写在一个json里面
$("#result").setTemplateElement("template").processTemplate(data);
//template指上面要实现模板化的id,这里的data就是上面存放模板化数据的json变量名
</script>
</html>
运行结果如下:
这里jTemplates要求将所有需要渲染版本的数据,写在一个json数组里面。说白了,你要摆上的数据id="template",就放在一个data里面,再用一句特定的代码渲染就行了。
可以看到对比起template.js,代码进一步简单明了。
2、条件结构
具体看如下代码:
<!DOCTYPE html>
<html>
<head>
<title>jTemplates</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-jtemplates.js"></script>
</head>
<body>
<div id="result">
<textarea id="template" style="display:none">
<h1>
{#if $T.a<0}
a不是正数
{#/if}
</h1>
<h1>
{#if $T.a>0}
a是正数
{#else}
a不是正数
{#/if}
</h1>
<h2>
{#if $T.a>2}
a大于2
{#elseif $T.a==2}
a等于
{#elseif $T.a<2}
a少于2
{#/if}
</h2>
</textarea>
</div>
</body>
<script>
var data = {
a: -2
};
$("#result").setTemplateElement("template").processTemplate(data);
</script>
</html>
运行结果如下:
可以看到jTemplates提供了如同编程语言的if~else条件判断,不过还是和template.js的建议,你有什么判断,建议在script判断完,甚至在你的后台编程语言java ee、php等判断完,再往上摆了。毕竟.html最好只有样式实现的片段。
3、循环结构
jTemplates的循环结构有点让人诟病,对于最常用的Ajax返回的json数组现实,他只提供了foreach结构,他提供的for结构,我试了很多次,貌似对json数组无效,当然,其代码简化也是明显的。如下代码,则是最基本的,用foreach结构,将json数组在网页打印一个表格。
<!DOCTYPE html>
<html>
<head>
<title>jTemplates</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-jtemplates.js"></script>
</head>
<body>
<div id="result">
<textarea id="template" style="display:none">
<b>{$T.name}foreach形式</b>
<table border="2">
<tr>
<th>编号</th><th>姓名</th><th>年龄</th><th>邮箱</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>
</div>
</body>
<script>
var data = {
name: '用户信息表',
table: [
{id: 1, name: 'Anne', age: 22, mail: '[email protected]'},
{id: 2, name: 'Amelie', age: 24, mail: '[email protected]'},
{id: 3, name: 'Polly', age: 18, mail: '[email protected]'},
{id: 4, name: 'Alice', age: 26, mail: '[email protected]'},
{id: 5, name: 'Martha', age: 25, mail: '[email protected]'}
]
};
$("#result").setTemplateElement("template").processTemplate(data);
</script>
</html>
运行结果如下:
foreach可以和方便地,一次性将整个json数据打印出来,但问题来了,如果我需要条件,比如上面的表格我要打印成每行颜色交替之类的,如下图所示:
当然你肯定以为我接下要像官网利用它的#cycle这个或许只有开发者自己才能看得懂的任性命令了。其实大可不用像官网那样整,大家注意到,jTemplates在实现循环结构最大的问题就是要个table整一个游标,这里是record,才能很好的打印。因为在for结构,无法给这些json数组指定游标,所以也就是读不出来,因此上面才说在jTemplates打印这些json数组,必须用foreach结构来打印。然而,注意到,正如我在2、条件结构所提到的一样,jTemplates的条件结构很发达,因此上面的效果,可以写成如下的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>jTemplates</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-jtemplates.js"></script>
</head>
<body>
<div id="result">
<textarea id="template" style="display:none">
<b>{$T.name}</b>
<table border="2">
<tr>
<th>编号</th><th>姓名</th><th>年龄</th><th>邮箱</th>
</tr>
{#foreach $T.table as record}
{#if $T.record.id%2!=0}
<tr bgcolor='#ffff00'>
{#else}
<tr bgcolor='#ffffff'>
{#/if}
<td>{$T.record.id}</td><td>{$T.record.name}</td><td>{$T.record.age}</td><td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</textarea>
</div>
</body>
<script>
var data = {
name: '用户信息表',
table: [
{id: 1, name: 'Anne', age: 22, mail: '[email protected]'},
{id: 2, name: 'Amelie', age: 24, mail: '[email protected]'},
{id: 3, name: 'Polly', age: 18, mail: '[email protected]'},
{id: 4, name: 'Alice', age: 26, mail: '[email protected]'},
{id: 5, name: 'Martha', age: 25, mail: '[email protected]'}
]
};
$("#result").setTemplateElement("template");
$("#result").processTemplate(data);
</script>
</html>
个人认为,单纯的foreach和if配合,这个在绝大多数编程语言都by都works的组合,比官网提供的#cycle标签好看多了。毕竟编程原理明确指出编程基本结构就三种,顺序、条件、循环。