jquery tmpl 详解(转)
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。
这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。
浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。
因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法
jquery.tmpl的几种常用标签分别有:
${}, {{each}}, {{if}}, {{else}}, {{html}}
不常用标签
{{=}},{{tmpl}} and {{wrap}}.
${}等同与{{=}}是输出变量 ${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效)
示例:
- <div id="div_demo">
- </div>
- <script id="demo" type="text/x-jquery-tmpl">
- <div style="margin-bottom:10px;">
- <span>${ID}</span>
- <span style="margin-left:10px;">{{= Name}}</span>
- <span style="margin-left:10px;">${Number(Num)+1}</span>
- <span style="margin-left:10px;">${Status}</span>
- </div>
- </script>
- <script type="text/javascript">
- var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}];
- $("#demo").tmpl(users).appendTo('#div_demo');
- </script>
{{each}} 提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)
示例:
- <div id="div_each">
- </div>
- <script id="each" type="text/x-jquery-tmpl">
- <h3>users</h3>
- {{each(i,user) users}}
- <div>${i+1}:{{= user.name}}</div>
- {{if i==0}}
- <h4>group</h4>
- {{each(j,group) groups}}
- <div>${group.name}</div>
- {{/each}}
- {{/if}}
- {{/each}}
- <h3>depart</h3>
- {{each departs}}
- <div>{{= $value.name}}</div>
- {{/each}}
- </script>
- <script type="text/javascript">
- var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
- $("#each").tmpl(eachData).appendTo('#div_each');
- </script>
{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if
示例:
- <div id="div_ifelse"></div>
- <script id="ifelse" type="text/x-jquery-tmpl">
- <div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{{= Name}}</span>
- {{if Status}}
- <span>Status${Status}</span>
- {{else App}}
- <span>App${App}</span>
- {{else}}
- <span>None</span>
- {{/if}}
- </div>
- </script>
- <script type="text/javascript">
- var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
- $("#ifelse").tmpl(users).appendTo('#div_ifelse');
- </script>
{{html}} 输出变量html,但是没有html编码,适合输出html代码
实例
- <div id="div_html"></div>
- <script id="html" type="text/x-jquery-tmpl">
- <div style="margin-bottom:10px;">
- <span>${ID}</span>
- <span style="margin-left:10px;">{{= Name}}</span>
- ${html}
- {{html html}}
- </div>
- </script>
- <script type="text/javascript">
- var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };
- $("#html").tmpl(user).appendTo('#div_html');
- </script>
{{tmpl}} 嵌套模版
实例
- <div id="tmpl"></div>
- <script id="tmpl1" type="text/x-jquery-tmpl">
- <div style="margin-bottom:10px;">
- <span>${ID}</span>
- <span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>
- </div>
- </script>
- <script id="tmpl2" type="type/x-jquery-tmpl">
- {{each Name}}${$value} {{/each}}
- </script>
- <script type="text/javascript">
- var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
- $("#tmpl1").tmpl(users).appendTo('#tmpl');
- </script>
{{wrap}},包装器
实例
- <div id="wrapDemo">
- </div>
- <script id="myTmpl" type="text/x-jquery-tmpl">
- The following wraps and reorders some HTML content:
- {{wrap "#tableWrapper"}}
- <h3>One</h3>
- <div>
- First <b>content</b>
- </div>
- <h3>Two</h3>
- <div>
- And <em>more</em> <b>content</b>...
- </div>
- {{/wrap}}
- </script>
- <script id="tableWrapper" type="text/x-jquery-tmpl">
- <table cellspacing="0" cellpadding="3" border="1"><tbody>
- <tr>
- {{each $item.html("h3", true)}}
- <td>
- ${$value}
- </td>
- {{/each}}
- </tr>
- <tr>
- {{each $item.html("div")}}
- <td>
- {{html $value}}
- </td>
- {{/each}}
- </tr>
- </tbody></table>
- </script>
- <script type="text/javascript">
- $(function () {
- $('#myTmpl').tmpl().appendTo('#wrapDemo');
- });
- </script>
$data $item $item代表当前的模板;$data代表当前的数据。
实例:
- <div id="div_item_data"></div>
- <script id="item_data" type="text/x-jquery-tmpl">
- <div style="margin-bottom:10px;">
- <span>${$data.ID}</span>
- <span style="margin-left:10px;">${$item.getName(" ")}</span>
- </div>
- </script>
- <script type="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>
$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item
实例
- <script type="text/javascript">
- $('#demo').delegate('div', 'click', function () {
- var item = $.tmplItem(this);
- alert(item.data.Name);
- });
- </script>
jquery tmpl 详解(转)的更多相关文章
- jquery tmpl 详解
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...
- Jquery tmpl详解
Jquery tmpl是动态请求数据来更新页面非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- jQuery.validator 详解
jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
- jquery方法详解
jquery方法详解 http://www.365mini.com/doc
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- JQuery数组详解(含实例)
<!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...
- [转载]JavaEE学习篇之——JQuery技术详解
原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...
随机推荐
- unix/linux中如何在vi编辑器中方便的跳转到首行和末行?
1.跳转到首行,:0/:1 2.跳转到末行,shift +g/G/:$
- Retrieving ST-Link/V2 Firmware from Update Utility
http://www.taylorkillian.com/2013/01/retrieving-st-linkv2-firmware-from.html http://forum.easyelectr ...
- 虚拟机安装Linux过程和踩坑
由于想学习node,服务器端大都使用Linux系统,所以就想着在笔记本上弄个虚拟机,装上Linux,使用xshell在window上操作也方便,也借此来熟悉一下Linux,接下来就解释下安装的步骤和遇 ...
- minor gc和full gc
Minor GC ,Full GC 触发条件 Minor GC触发条件:当Eden区满时,触发Minor GC. Full GC触发条件: (1)调用System.gc时,系统建议执行Full GC, ...
- Selenium2+python自动化70-unittest之跳过用例(skip)
前言 当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例 ...
- Mysql 会导致锁表的语法
最近再找一些Mysql锁表原因,整理出来一部分sql语句会锁表的,方便查阅,整理的不是很全,都是工作中碰到的,会持续更新 笔者能力有限,如果有不正确的,或者不到位的地方,还请大家指出来,方便你我,方便 ...
- ARC中的@autoreleasepool还有作用吗?
ARC中的@autoreleasepool还有作用吗? QUESTION For the most part with ARC (Automatic Reference Counting), we d ...
- RxJava 中文文档
https://mcxiaoke.gitbooks.io/rxdocs/content/Subject.html
- jenkins的docker
参考:https://store.docker.com/images/jenkins?tab=description https://my.oschina.net/jayqqaa12/blog/633 ...
- iOS:集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICollectionViewCell(创建表格的另一种控件)
两种创建表格方式的比较:表格视图.集合视图(二者十分类似) <1>相同点: 表格视图:UITableView(位于storyboard中,通过UIViewController控制器实现 ...