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