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