基于jquery框架的jTemplates模板引擎的使用

首先简单介绍下jTemplates：

它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下：

1. 通过JS获取JSON形式的数据；

2. 获取一个HTML模板，与数据相结合，生成页面HTML。

  使用方法很简单，首先要引用 jquery 还有 jTemplates。然后就可以很happy的从后台调数据了。具体示例源码（带注释）如下。为了节约空间，代码非常不完整。只不过是描述思想罢了。

Js代码

1. <script language="JavaScript" type="text/javascript" src="/admin/js/jquery-1.4.4.min.js"></script> 
2.  
3. <script language="JavaScript" type="text/javascript" src="/admin/js/jquery-jtemplates.js"></script> 
4.  
5.   
6.  
7. (function($) 
8. { 
9.  
10. var showallactivity = function() 
11.         { 
12.                 $.ajax( 
13.                 { 
14.                         url: "这里是要访问的文件路径", 
15.                         cache: false, 
16.                         dataType: "jsonp", 
17.                         data: { "m": "game_activity", "a": "AskActivityList"}, 
18.                         success:function(backjsondata){ 
19.                                 if(backjsondata['result'] == 1) 
20.                                 {       
21.                                         var data = backjsondata['data']; 
22.  
23.                                         //这里是关键 将数据用ID为showallactivity-templates   模板处理后扔到ID是datas的域里 
24.                                         $("#datas").setTemplateElement("showallactivity-templates").processTemplate(data); 
25.                                 } 
26.                                 else 
27.                                 { 
28.                                         alert('没有数据!'); 
29.                                 } 
30.                         }   
31.                 }); 
32.         } 
33.  
34. })(jQuery); 
35.  
36.   
37.  
38. <!-- 这里是 jTemplates 嵌入模版的方法 --> 
39.   <p style="display:none"><textarea id="showallactivity-templates" rows="0" cols="0"> 
40.     <!-- 
41.     {#foreach $T as record} 
42.     <tr> 
43.       <td>{$T.record['m_uActId']}</td>      
44.       <td>{$T.record['m_uTmplId']}</td> 
45.       <td>{$T.record['m_tStarth']}</td> 
46.       <td>{$T.record['m_tEndh']}</td> 
47.       <td><a href='javascript：　void(0)' οnclick='delactivity({$T.record['m_uActId']})'>删除活动</a></td> 
48.     </tr> 
49.     {#/for} 
50.     --> 
51.     </textarea> 
52.   </p> 
53.  
54.   
55.  
56. <table class="datalist fixwidth" id="datalist2"> 
57.         <thead> 
58.           <tr>    
59.             <th> 活动ID </th> 
60.             <th> 模板ID</th> 
61.             <th> 开始时间 </th> 
62.             <th> 结束时间 </th> 
63.           </tr> 
64.         </thead> 
65.         <tbody id='datas'> 
66.             <!--最后从服务器取到的数据就是扔在这里了-->    
67.         </tbody> 
68.       </table> 
69.  
70.   

<script language="JavaScript" type="text/javascript" src="/admin/js/jquery-1.4.4.min.js"></script>

<script language="JavaScript" type="text/javascript" src="/admin/js/jquery-jtemplates.js"></script>

 

(function($)
{

 var showallactivity = function()
        {
                $.ajax(
                {
                        url: "这里是要访问的文件路径",
                        cache: false,
                        dataType: "jsonp",
                        data: { "m": "game_activity", "a": "AskActivityList"},
                        success:function(backjsondata){
                                if(backjsondata['result'] == 1)
                                {      
                                        var data = backjsondata['data'];

                                        //这里是关键 将数据用ID为showallactivity-templates   模板处理后扔到ID是datas的域里
                                        $("#datas").setTemplateElement("showallactivity-templates").processTemplate(data);
                                }
                                else
                                {
                                        alert('没有数据!');
                                }
                        }  
                });
        }

})(jQuery);

 

<!-- 这里是 jTemplates 嵌入模版的方法 -->
  <p style="display:none"><textarea id="showallactivity-templates" rows="0" cols="0">
    <!--
    {#foreach $T as record}
    <tr>
      <td>{$T.record['m_uActId']}</td>     
      <td>{$T.record['m_uTmplId']}</td>
      <td>{$T.record['m_tStarth']}</td>
      <td>{$T.record['m_tEndh']}</td>
      <td><a href='javascript：　void(0)' οnclick='delactivity({$T.record['m_uActId']})'>删除活动</a></td>
    </tr>
    {#/for}
    -->
    </textarea>
  </p>

 

<table class="datalist fixwidth" id="datalist2">
        <thead>
          <tr>   
            <th> 活动ID </th>
            <th> 模板ID</th>
            <th> 开始时间 </th>
            <th> 结束时间 </th>
          </tr>
        </thead>
        <tbody id='datas'>
            <!--最后从服务器取到的数据就是扔在这里了-->   
        </tbody>
      </table>

 

基本的使用方法就是这样了。

本人小菜鸟一枚，如果有什么问题，欢迎大家拍砖。谢谢。