JS模板引擎jTemplates使用笔记详解

JS模板引擎jTemplates使用笔记详解

一、1、jTemplate简介

jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON一起协同工作，模板内容可以用JS代码，实现了活动更新，可以自动从服务器更新模板生成的内容。 </p><p><span style="white-space:pre"></span>使用jTemplates,<span style="font-family:arial; font-size:13px; line-height:18px">服务端只需要把对象集合序列化成json格式并传入客户端，客户端再把json对象填充模版生成列表，这样一服务端传输的只是json格式的字符串，传输的数据量可是大大减少了，二遍历绑定的工作转移到了客户端，大大减轻了服务端的压力。

jTemplates能免费应用于商业和非商业。下载地址：http://jtemplates.tpython.com，实例介绍：

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>  
<script type="text/javascript" src="jquery-jtemplates.js"></script>  
  
<script type="text/javascript">  
   $(document).ready(function() {  
    //初始化JSON数据  
    var data = {  
     name: '用户列表',  
     list_id: '编号89757',  
     table: [  
      {id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},  
      {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},  
      {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},  
      {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},  
      {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}  
     ]  
    };  
    // 附上模板  
    $("#result1").setTemplateElement("template");  
    // 给模板加载数据  
    $("#result1").processTemplate(data);  
   });   
</script>  

  
  
  

   
   
   <!-- 模板内容 -->  
  
  
  
  
  
  

   
   
   <textarea id="template" style="display:none">  
  
  
  
  
  
  

   
   
      <strong>{$T.name} : {$T.list_id}</strong>  
  
  
  
  
  
  

   
   
   
      <th>姓
  
  
  
  
  
  

   
   
      <table>  
  
  
  
  
  
  

   
   
           <tr>  
  
  
  
  
  
  

   
   
         <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 id="result1" ></div>
  
  
  

具体步骤：

1、要使用jtemplate首先要引入两个js脚本文件：

<script type="text/javascript" src="Scripts/jquery.js"></script>

<script type="text/javascript" src="Scripts/jquery-jtemplates.js"></script>

需要注意的是，jtemplate是在jquery的基础上实现的，所以脚本的引入顺序不能颠倒，否则会报错

2、. 然后建模版：

<!-- 结果容器 -->

 <div id="result_container"></div>

 

    <!-- 模版内容 -->

 <textarea id="template-items" style="display:none">

　　<table border="1" style="border-collapse:collapse">

  <tr><th>姓名</th><th>邮箱</th><th>生日</th></tr>

     {#foreach $T as item}

   <tr>

    　　<td>{$T.item.name}</td>

    　　<td>{$T.item.mail}</td>

          <td>{$T.item.birthday}</td>

   </tr>

   {#/for}

  </table>

 </textarea>

这就是jtemplate模版的格式，模版内容是放在textarea里的，而关键字和数据是用大括号包起来的，并且以$T表示数据，关键字以#作为开始标记。

3、 用json数据填充模板并展示：

<script type="text/javascript">

        var data = [{ name: 'Anne', birthday: '2001-01-01', mail: 'anne@domain.com' },

     { name: 'Amelie', birthday: '2002-02-02', mail: 'amelie@domain.com' },

     { name: 'Polly', birthday: '2003-03-03', mail: 'polly@domain.com' },

     { name: 'Alice', birthday: '2004-04-04', mail: 'alice@domain.com' },

     { name: 'Martha', birthday: '2005-05-05', mail: 'martha@domain.com'}]

        // 设置模版

        $("#result_container").setTemplateElement("template-items");

        // 填充数据并展示

        $("#result_container").processTemplate(data);

　　　//这里也可以写成$("#result_container").setTemplateElement("template-items").processTemplate(data);

    </script>