大家好,又见面了,我是你们的朋友全栈君。
jquery tmpl简介:动态请求数据更新页面非常常用的方法,例如博客评论的分页动态加载,微博的滚动加载和定时请求加载以及ajax请求返回数据等。
这些情况下,动态请求返回的数据一般不是已拼好的html就是JSON或XML,总之不在浏览器端拼接数据就在服务器端拼接数据。
浏览器端根据JSON生成HTML有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就需要很小心的写出几乎无法维护的javascript代码。
因此,一些用模板生成HTML的框架相继出现jquery.tmpl就是其中一种,下面讲一下jquery.tmpl的使用语法,可分为三大类:
1、显示类
{
{html}}/{
{= }}/${},这三个标签多能够将数据输出到模板中,但是{
{html}}不会对数据进行编码,用于输出数据中的HTML代码段,
而{
{=}}和${}怎会对数据进行编码,防止数据对于模板结构的破坏。
2、条件判断及循环
{
{if}}/{
{else}}/{
{/if}}/{
{each}}请注意是没有for/while/switch的,相对来说jquery Tmpl只支持
较为简单的逻辑判断,当然如果你感觉这些满足不了你的需求的话,可以自己写函数然后调用。
3、复用类
{
{tmpl}}当分支模板过长(写在一个模板中较为轮乱)或者使用已经写好的通用模板,{
{temp}}的作用就是
调用指定ID模板来显示数据。
下面具体写个例子表现一下:
例1:通过直接写json字符串的形式引入数据。
- <div style=“margin-top: 30px;”>
- <h3>地区</h3>
- <div id=“place”></div>
- </div>
- <script src=“js/jquery-1.11.1.min.js”></script>
- <script src=“js/jquery.tmpl.js”></script>
- <script type=“text/tmpl” id=“temp”>
- <span style=“margin: 0 6px;”>${place}</span>
- </script>
- <script>
- var origin={
- plc:[
- {place:’上海’},
- {place:’深圳’},
- {place:’北京’},
- {place:’广州’}
- ]
- };
- $(‘#temp’).tmpl(origin.plc).appendTo(‘#place’);
- </script>
例2:通过getJSON引入json数据。
- <div style=“margin-top: 30px;”>
- <h3>地区</h3>
- <div id=“place”></div>
- </div>
- <script src=“js/jquery-1.11.1.min.js”></script>
- <script src=“js/jquery.tmpl.js”></script>
- <script type=“text/tmpl” id=“temp”>
- <span style=“margin: 0 6px;”>${place}</span>
- </script>
- <script>
- $.getJSON(‘json/place.json’,function(data){
- //通过拼接字符串的形式书写
- /*var str=“”;
- for(var i=0;i<data.plc.length;i++){
- str+=’<span style=“margin: 0 6px;”>‘+data.plc[i].place+’</span>‘;
- console.log(“str:”+str);
- }
- $(‘#place’).append(str);
- */
- //tmpl形式
- $(‘#temp’).tmpl(data.plc).appendTo(‘#place’);
- });
- </script>
place.json数据内容为:
{
“plc”:[
{“place”:”上海”},
{“place”:”深圳”},
{“place”:”北京”},
{“place”:”广州”}
]
}
例3:读取多个参数信息。
- <div class=“container”>
- <table border=“1px” cellpadding=“5” cellspacing=“0” width=“100%”>
- <thead>
- <tr>
- <td>firstName</td>
- <td>lastName</td>
- <td>email</td>
- <td>place</td>
- </tr>
- </thead>
- <tbody id=“tbody”></tbody>
- </table>
- <table border=“1px” cellpadding=“5” cellspacing=“0” width=“100%” style=“margin-top: 30px;”>
- <thead>
- <tr>
- <td>Name</td>
- <td>Level</td>
- <td>img</td>
- </tr>
- </thead>
- <tbody id=“tbody2”></tbody>
- </table>
- </div>
- <script src=“js/jquery-1.11.1.min.js”></script>
- <script src=“js/jquery.tmpl.js”></script>
- <script type=“text/tmpl” id=“temp”>
- <tr>
- <td>${firstName}</td>
- <td>{
{= lastName}}</td> - <td>{
{html email}}</td> - <td>{
{html place}}</td> - </tr>
- </script>
- <script type=“text/tmpl” id=“temp2”>
- <tr>
- <td>${name}</td>
- <td>${level}</td>
- <td><img src=“${img}”/></td>
- </tr>
- </script>
- <script>
- $.getJSON(“json/test.json”,{},function(data){
- $(‘#temp’).tmpl(data.programmers).appendTo(‘#tbody’);
- $(‘#temp2’).tmpl(data.authors).appendTo(‘#tbody2’);
- });
- </script>
test.json数据内容为:
{
“programmers”:[
{“firstName”:”Lucy”,”lastName”:”zhao”,”email”:”123456″,”place”:”上海”},
{“firstName”:”Tizzy T”,”lastName”:”wang”,”email”:”123″,”place”:”北京”}
],
“authors”:[
{“name”:”Any”,”level”:”one”,”img”:”./img/foot_21.png”},
{“name”:”cool”,”level”:”two”,”img”:”img/foot_31.png”},
{“name”:”Luck”,”level”:”three”,”img”:”img/foot_41.png”}
],
“origin”:[
{“place”:”上海”},
{“place”:”深圳”},
{“place”:”北京”},
{“place”:”广州”}
]
}
注意:页面中引入有jquery和jquery.tmpl文件,必要时修改一下路径。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149081.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...