</pre></h1><p><span style="font-size:24px; color:#3333ff">1、jTemplate简介</span>:</p><p><span style="white-space:pre"></span>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格式的字符串,传输的数据量可是大大减少了,二遍历绑定的工作转移到了客户端,大大减轻了服务端的压力。</span></p><p><span style="white-space:pre"></span>jTemplates能免费应用于商业和非商业。下载地址:<a target=_blank target="_blank" href="http://jtemplates.tpython.com/">http://jtemplates.tpython.com/</a></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><span style="background-color:rgb(254,254,242); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px">jTemplates的工作方式:1、</span><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px">setTemplate </span><span style="background-color:rgb(254,254,242); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px">指定可处理的模版对象 2、</span><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px">processTemplate 对模版化的对象进行数据处理,实例介绍:</span></div><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px"></span><pre code_snippet_id="436151" snippet_file_name="blog_20140727_2_8021345" name="code" class="javascript"><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>
<table>
<tr>
<th>编号</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>
</pre></h1><p><span style="font-size:24px; color:#3333ff">1、jTemplate简介</span>:</p><p><span style="white-space:pre"></span>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格式的字符串,传输的数据量可是大大减少了,二遍历绑定的工作转移到了客户端,大大减轻了服务端的压力。</span></p><p><span style="white-space:pre"></span>jTemplates能免费应用于商业和非商业。下载地址:<a target=_blank target="_blank" href="http://jtemplates.tpython.com/">http://jtemplates.tpython.com/</a></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><span style="background-color:rgb(254,254,242); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px">jTemplates的工作方式:1、</span><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px">setTemplate </span><span style="background-color:rgb(254,254,242); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px">指定可处理的模版对象 2、</span><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px">processTemplate 对模版化的对象进行数据处理,实例介绍:</span></div><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px"></span><pre code_snippet_id="436151" snippet_file_name="blog_20140727_2_8021345" name="code" class="javascript"><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>
<table>
<tr>
<th>编号</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&g