jTemplate是基于jQuery的开源的前端模版引擎,当前版本为:0.7.8
官方网站:http://jtemplates.tpython.com/
简介
本产品的优点:
1、100%的是javascript
2、可以通过ajax获取JSON格式的数据
3、在模版中允许使用javascript代码
4、基于jQuery。
5、允许你创建串接模版
6、允许你在模版中创建参数
7、即时刷新,自动从服务器端获取更新内容。
8、对商业和非商业都是免费的。
模版实例:
{#template MAIN}
<div id="header">{$T.name}</div>
<table>
{#foreach $T.table as r}
{#include row root=$T.r}
{#/for}
</table>
{#/template MAIN}
{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
<td>{$T.name.bold()}</td>
<td>{$T.age}</td>
<td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}
标签
jTemplate又有的标签有:
1、template 模版标签
2、if .. elseif .. else .. /if 条件语句
3、foreach .. else .. /for 循环
4、for .. else .. /for 循环
5、continue, break 继续或中断
6、include 包含
7、cycle 周期
8、lderim .. redlim
9、literal
实例:
实例中用到的数据:
var data = {
name: 'user_list',
list_id: 4,
users:[
{id: 1, name: '张三', birthday: '1987-12-12', sex: 1},
{id: 2, name: '李璐', birthday: '1988-12-12', sex: 2},
{id: 3, name: '王武', birthday: '1989-12-12', sex: 1},
{id: 4, name: '王妃', birthday: '1989-12-12', sex: 2},
{id: 5, name: '小鬼', birthday: '1989-12-12', sex: 0}
]
};
1、{#foreach} .. {#/for} 和{#if} .. {#/if}
模版:
<div id="result"></div>
<textarea id="template_1" style="display: none;">
<table>
<tr>
<th>编号</th>
<th>用户名</th>
<th>出生日期</th>
<th>性别</th>
</tr>
{#foreach $T.users as user}
<tr>
<td>{$T.user.id}</td>
<td>{$T.user.name}</td>
<td>{$T.user.birthday}</td>
<td>
{#if $T.user.sex == 1}
男
{#elseif $T.user.sex == 2}
女
{#else}
保密
{#/if}
</td>
</tr>
{#/for}
</table>
</textarea>
...
$('#result').setTemplateElement('template_1'); //设置模版
$('#result').processTemplate(data); //执行数据
...
结果:
编号 | 用户名 | 出生日期 | 性别 |
---|---|---|---|
1 | 张三 | 1987-12-12 | 男 |
2 | 李璐 | 1988-12-12 | 女 |
3 | 王武 | 1989-12-12 | 男 |
4 | 王妃 | 1989-12-12 | 女 |
5 | 小鬼 | 1989-12-12 | 保密 |
2、{#for} .. {#/for}
语法:{#for |VAR| = |CODE| to |CODE| [stype=|CODE|]} .. {#else} .. {#/for}
例子:
{#for index = 1 to 10} {$T.index} {#/for} , 结果: 1 2 3 4 5 6 7 8 9 10
{#for index = 1 to 10 step=2} {$T.index} {#/for} , 结果: 1 3 5 7 9
{#for index = 1 to 10 step=-2} {$T.index} {#/for} , 结果: 不输出任何结果。
{#for index = 10 to 1 step=-2} {$T.index} {#/for} , 结果: 10 8 6 4 2
$('#result').setTemplate(' {#for index = $T.start to $T.end} {$T.content}{$T.index}<br/> {#/for} ');
$('#result').processTemplate({start: 1, end: 4, content: 'ID: '});
结果:
ID:1
ID:2
ID:3
ID:4