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

来源：互联网发布：知乎周广甫编辑：程序博客网时间：2024/05/29 14:29

首先简单介绍下jTemplates：

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

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

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

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

Js代码

<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);
<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>

<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>

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

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