jTemplate —— 基于jQuery的javascript前台模版引擎

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