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

最近在搞公司自研游戏的GM管理后台。怎一个苦逼了得。真心希望等游戏放出来的时候能多点人玩玩。那样我这苦逼的加班也算是值得了。

  不搞废话了，直入正题。

  首先简单介绍下jTemplates：

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

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

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

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

 

<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)' onclick='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>

 

 

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

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

 

jtemplates官方首页 :（虽然我表示看不太懂的说）

http://jtemplates.tpython.com/

 

最后打个小广告--网页游戏集中营--只有想不到没有玩不到