有编程基础的朋友们都应该知道一个MVC这个概念,在前端的编程中,我们常常需要动态获取数据,将数据在前台展示出来。展示时,html的拼接成了一个十分令人苦恼的问题。如果能在前端中也有类似MVC概念的应用,将数据与html标签进行分离,将大大减少我们的工作量,提高工作效率,同时也提高我们代码的可维护性。近期在前端学习中发现jquery中一个很方便的插件:tmpl。
下载地址:https://github.com/BorisMoore/jquery-tmpl/blob/master/jquery.tmpl.js。
应用时必须引入1.4以上版本的jquery。
一、Tmpl中的几种常用tag
1、${key} 与 {{= key}}作用相同,表示取值,输出变量(=和变量之间一定要有空格,否则无效)
${}里面还可以放表达式
如${key +/- n}
2、{{if}}, {{else}}
{{if Status}}
<span>Status${Status}</span>
{{else App}}//注意else的时候不是else if
<span>App${App}</span>
{{else}}
<span>None</span>
{{/if}}
3、{{each}}
提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)
4、{{html}}
取出html代码,用法{{html html}},可理解为html格式的变量
5、{{tmpl}} and{{wrap}}.
二、tmpl中的基本用法
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/jquery.tmpl.js"></script><!-- https://github.com/BorisMoore/jquery-tmpl/blob/master/jquery.tmpl.js -->
</head>
<body>
<ul id="list"></ul>
<script type="text/template" id='UserTmpl'>
<li>
<span>${ID}</span>
<span>{{= NickName}}</span>
<span>${Age+1}</span>
<!--判断,等同于jq中的if else,不同之处在于,要写end if-->
{{if Gender}}
<span>男</span>
{{else}}
<span>女</span>
{{/if}}
<!--循环,类似jq中的each,对于数组中的每个值套入模板进行操作,value类似于this此处采用$value迭代变量,-->
<ul>
{{each major}}
<li>采用$value迭代变量 ${$value.name}</li>
{{/each}}
</ul>
<!--循环,通过自定义迭代变量(i,value) -->
<ul>
{{each(i,la) major}}
<li>自定义迭代变量:${i+1}:{{= la.name}}</li>
{{/each}}
</ul>
<!--取出html代码,此处将呈现一个按钮-->
{{html ht}}
</li>
</script>
<!--定义模板,根据需求在所需处取数据中的值-->
<script type="text/javascript">
var users=[
{ID:"0001",NickName:"小白",Gender:false,Age:18, major:[{name: "语文"},{name: "数学"}], ht: "<button>确认</button>"},
{ID:"0002",NickName:"小黑",Gender:true,Age:20, major:[{name: "英语"},{name: "生物"}]}
]; /*定义数据,数据一般是数组或json类型的*/
$("#list").append($("#UserTmpl").tmpl(users));
/*("模板script标签的id").tmpl(数据,数组形式),返回将数据套入模板后的html*/
</script>
</body>
</html>
三、$data $item
(以下例子来自于http://www.2cto.com/kf/201401/271190.html)
$item代表当前的模板;$data代表当前的数据。
<divid="div_item_data"></div>
<scriptid="item_data" type="text/x-jquery-tmpl">
<divstyle="margin-bottom:10px;">
<span>${$data.ID}</span><!--$data代表当前的数据 -->
<spanstyle="margin-left:10px;">${$item.getName("")}</span><!--$item代表当前的模板-->
</div>
</script>
<scripttype="text/javascript">
var users = [{ ID: 'think8848', Name:['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
$("#item_data").tmpl(users,
{
getName: function (spr) {
return this.data.Name.join(spr);
}
}).appendTo('#div_item_data');
</script>
以上是本人找到的参考资料,主要参考于
http://www.cnblogs.com/Sunlimi/p/4378646.html
http://www.2cto.com/kf/201401/271190.html
Ajax和template简单介绍
jQuery-template.js学习