JS模板引擎jTemplates基础使⽤
1.jTemplate简介
jTemplates是⼀个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON⼀起协同⼯作，模板内容可以⽤JS代码，实现了活动更新，可以⾃动从服务器更新模板⽣成的内容。
使⽤jTemplates，服务端只需要把对象集合序列化成json格式并传⼊客户端，客户端再把json对象填充模版⽣成列表，这样⼀服务端传输的只是json格式的字符串，传输的数据量可是⼤⼤减少了遍历绑定的⼯作转移到了客户端，⼤⼤减轻了服务端的压⼒。
jTemplates是⼀个基于JQuery的模板引擎插件，功能强⼤，有了他你就再不⽤为使⽤JS绑定数据时发愁了。后端语⾔使⽤
php,asp,jsp等都不是问题，使⽤模板渲染可以很⼤程度上提⾼程序性能，使⽤异步获取数据，不⽤整个页⾯都回发，好处当然不仅仅是这些。
2.jTemplate库下载
引⼊js⽂件代码如下：
<script type="text/javascript" src="./js/jquery-3.4.1"></script>
<script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
3.jTemplate简单案例
3.1.构造数据
jtemplates模板的简单使⽤，⾸先使⽤jtemplates就要使⽤json数据，在这⾥我们不妨构造⼀个json格式的数据，如下：
<script type="text/javascript">
$(document).ready(function(){
//初始化JSON数据
var data ={
name:'⽤户列表',
list_id:'编号89757',
table:[
{id:1, name:'Rain', age:22, mail:'cssrain@domain'},
{id:2, name:'⽪特', age:24, mail:'cssrain@domain'},
{id:3, name:'卡卡', age:20, mail:'cssrain@domain'},
{id:4, name:'戏戏', age:26, mail:'cssrain@domain'},
{id:5, name:'⼀揪', age:25, mail:'cssrain@domain'}
]
};
// 附上模板
$("#result1").setTemplateElement("template");
// 给模板加载数据
$("#result1").processTemplate(data);
});
</script>
3.2.模板内容
<!-- 模板内容 -->
<textarea id="template" >
<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或者其他标签均可，我这⾥使⽤div如下：
3.3.输出元素
<!-- 输出元素 -->
<div id="result1"></div>
3.4.运⾏结果
⼩结：jTemplates的⼯作⽅式：1、setTemplate 指定可处理的模版对象 2、processTemplate 对模版化的对象进⾏数据处理
4.jTemplate简单案例-Ajax实现
4.1.新建⼀个JSON⽂件
{
"name":"⽤户列表",
"list_id":"1111",
"table":[
{
"id":1,
"name":"Rain",
"age":22,
"mail":"cssrain@domain"
},
{
"id":2,
"name":"⽪特",
"age":24,
"mail":"cssrain@domain"
},
{
"id":3,
"name":"卡卡",
"age":20,
"mail":"cssrain@domain"
},
{
"id":4,
"name":"戏戏",
"age":26,
"mail":"cssrain@domain"
},
{
"id":5,
"name":"⼀揪",
"age":25,
"mail":"cssrain@domain"
}
]
}
4.2.通过AJAX⽅式获取数据，并将数据填充到模板页中
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/jquery.jtemplates.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("data.json",function(data){
//alert(JSON.stringify(result));
// 附上模板
$("#result1").setTemplateElement("template");
// 给模板加载数据
$("#result1").processTemplate(data);
})
});
</script>
4.3.模板内容
<!-- 模板内容 -->
<textarea id="template" >
<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或者其他标签均可，我这⾥使⽤div如下：
4.4.输出元素
<!-- 输出元素 -->
<div id="result1"></div>
4.5.运⾏结果
5.jTemplate基础语法
1、⼤括号{..} ，在这⾥⾯可以写任何javascript的代码，⽐如 {$T.toUpperCase()}
2、{$T} : 表⽰数据，例如上⾯的例⼦，$T.table表⽰得到data的table对象，$T.TotalCount 为 64。
3、{#foreach} : 循环获取数据，如上⾯：{#foreach $T.table as row}      {$T.row.Title}      {/for}
jTemplates包含三个预定全局变量，分别是$T、$P、$Q。$T为模板提供数据调⽤功能，$P为模板提供参数变量调⽤功能，$Q.version提供当前jTemplate的版本
jTemplates还⽀持#if、#for、#cycle、#foreach、#include、#param标签，帮助你处理实现复杂的业务情形。
5.1 IF语法
语法格式：
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
⽰例：
#if ⽰例:
{#if $T.hello} hello world. {#/if}
{#if 2*8==16} good {#else} fail {#/if}
{#if $T.age>=18)} 成⼈了 {#else} 未成年 {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if} 5.2 for 语法
#for 语法
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
或
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}
#for ⽰例：
默认步长：{#for index = 1 to 10} {$T.index} {#/for}
正向步长：{#for index = 1 to 10 step=3} {$T.index} {#/for}
负向步长及空循环：{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
也可以在循环中使⽤变量：{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}
说明：{#else}是在{#}未能执⾏的时的输出内容。
js获取json的key和value5.3 foreach 语法
#foreach 语法
#foreach ⽰例：
默认：{#foreach $T.table as record} {$T.record.name} {#/for}
指定起始位置：{#foreach $T.table as record begin=1} {$T.record.name} {#/for}
指定起始和循环次数：{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}
指定步长：{#foreach $T.table as record step=2} {$T.record.name} {#/for}
#foreach 内定环境变量：
$index - index of element in table
$iteration - id of iteration (next number begin from 0)
$first - is first iteration?
$last - is last iteration?
$total - total number of iterations
$key - key in object (name of element) (0.6.0+)
$typeof - type of element (0.6.0+)
#foreach ⽰例所需要的数据：
var data = {
name: 'User list',
list_id: 4,
table: [
{id: 1, name: 'Anne', age: 22, mail: 'anne@domain'},
{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain'},
{id: 3, name: 'Polly', age: 18, mail: 'polly@domain'},
{id: 4, name: 'Alice', age: 26, mail: 'alice@domain'},
{id: 5, name: 'Martha', age: 25, mail: 'martha@domain'}
]
};
(0.7.0+)版以后新增的功能，⽀持待循环集合⽤函数代替：
{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}例：
f = function(step) {
if(step > 100) return null; // stop if loop is too long
return "Step " + step;
};
$("#result").setTemplate("{#foreach f as funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}"); $("#result").processTemplate();
#foreach在每次循环时请求的就是f函数，然后传递参数给f使⽤，并返回结果给funcValue变量

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。