动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法

jquery.tmpl的几种常用标签分别有:

${}{{each}}{{if}}{{else}}{{html}}

不常用标签

{{=}},{{tmpl}} and {{wrap}}.

${}等同与{{=}}是输出变量 ${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效)

示例:

  1. <div id="div_demo">
  2. </div>
  3. <script id="demo" type="text/x-jquery-tmpl">
  4. <div style="margin-bottom:10px;">
  5.   <span>${ID}</span>
  6.   <span style="margin-left:10px;">{{= Name}}</span>
  7.   <span style="margin-left:10px;">${Number(Num)+1}</span>
  8.   <span style="margin-left:10px;">${Status}</span>
  9. </div>
  10. </script>
  11. <script type="text/javascript">
  12.   var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}];
  13.   $("#demo").tmpl(users).appendTo('#div_demo');
  14. </script>

  

{{each}} 提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)

示例:

  1. <div id="div_each">
  2. </div>
  3. <script id="each" type="text/x-jquery-tmpl">
  4. <h3>users</h3>
  5. {{each(i,user) users}}
  6. <div>${i+1}:{{= user.name}}</div>
  7. {{if i==0}}
  8. <h4>group</h4>
  9. {{each(j,group) groups}}
  10. <div>${group.name}</div>
  11. {{/each}}
  12. {{/if}}
  13. {{/each}}
  14. <h3>depart</h3>
  15. {{each departs}}
  16. <div>{{= $value.name}}</div>
  17. {{/each}}
  18. </script>
  19. <script type="text/javascript">
  20.   var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
  21.   $("#each").tmpl(eachData).appendTo('#div_each');
  22. </script>

  

{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if

示例:

  1. <div id="div_ifelse"></div>
  2. <script id="ifelse" type="text/x-jquery-tmpl">
  3. <div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{{= Name}}</span>
  4. {{if Status}}
  5. <span>Status${Status}</span>
  6. {{else App}}
  7. <span>App${App}</span>
  8. {{else}}
  9. <span>None</span>
  10. {{/if}}
  11. </div>
  12. </script>
  13. <script type="text/javascript">
  14.   var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
  15. $("#ifelse").tmpl(users).appendTo('#div_ifelse');
  16. </script>

  

{{html}} 输出变量html,但是没有html编码,适合输出html代码

实例

  1. <div id="div_html"></div>
  2. <script id="html" type="text/x-jquery-tmpl">
  3. <div style="margin-bottom:10px;">
  4.     <span>${ID}</span>
  5.     <span style="margin-left:10px;">{{= Name}}</span>
  6.   ${html}
  7.   {{html html}}
  8. </div>
  9. </script>
  10. <script type="text/javascript">
  11.   var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };
  12.  $("#html").tmpl(user).appendTo('#div_html');
  13. </script>

  

{{tmpl}} 嵌套模版

实例

  1. <div id="tmpl"></div>
  2. <script id="tmpl1" type="text/x-jquery-tmpl">
  3. <div style="margin-bottom:10px;">
  4.   <span>${ID}</span>
  5.   <span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>
  6. </div>
  7. </script>
  8. <script id="tmpl2" type="type/x-jquery-tmpl">
  9. {{each Name}}${$value} {{/each}}
  10. </script>
  11. <script type="text/javascript">
  12.   var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
  13. $("#tmpl1").tmpl(users).appendTo('#tmpl');
  14. </script>

  

{{wrap}},包装器

实例

  1. <div id="wrapDemo">
  2. </div>
  3. <script id="myTmpl" type="text/x-jquery-tmpl">
  4. The following wraps and reorders some HTML content:
  5. {{wrap "#tableWrapper"}}
  6. <h3>One</h3>
  7. <div>
  8. First <b>content</b>
  9. </div>
  10. <h3>Two</h3>
  11. <div>
  12. And <em>more</em> <b>content</b>...
  13. </div>
  14. {{/wrap}}
  15. </script>
  16. <script id="tableWrapper" type="text/x-jquery-tmpl">
  17. <table cellspacing="0" cellpadding="3" border="1"><tbody>
  18. <tr>
  19. {{each $item.html("h3", true)}}
  20. <td>
  21. ${$value}
  22. </td>
  23. {{/each}}
  24. </tr>
  25. <tr>
  26. {{each $item.html("div")}}
  27. <td>
  28. {{html $value}}
  29. </td>
  30. {{/each}}
  31. </tr>
  32. </tbody></table>
  33. </script>
  34. <script type="text/javascript">
  35. $(function () {
  36. $('#myTmpl').tmpl().appendTo('#wrapDemo');
  37. });
  38. </script>

  

$data $item $item代表当前的模板;$data代表当前的数据。

实例:

  1. <div id="div_item_data"></div>
  2. <script id="item_data" type="text/x-jquery-tmpl">
  3. <div style="margin-bottom:10px;">
  4.     <span>${$data.ID}</span>
  5.     <span style="margin-left:10px;">${$item.getName(" ")}</span>
  6.    </div>
  7. </script>
  8. <script type="text/javascript">
  9.   var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
  10. $("#item_data").tmpl(users,
  11. {
  12. getName: function (spr) {
  13. return this.data.Name.join(spr);
  14. }
  15. }).appendTo('#div_item_data');
  16. </script>

$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item

实例

  1. <script type="text/javascript">
  2.   $('#demo').delegate('div', 'click', function () {
  3. var item = $.tmplItem(this);
  4. alert(item.data.Name);
  5. });
  6. </script>

  

jquery tmpl 详解(转)的更多相关文章

  1. jquery tmpl 详解

    官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...

  2. Jquery tmpl详解

    Jquery tmpl是动态请求数据来更新页面非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 ...

  3. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  4. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  5. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  6. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  7. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  8. JQuery数组详解(含实例)

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  9. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...

随机推荐

  1. unix/linux中如何在vi编辑器中方便的跳转到首行和末行?

    1.跳转到首行,:0/:1 2.跳转到末行,shift +g/G/:$

  2. Retrieving ST-Link/V2 Firmware from Update Utility

    http://www.taylorkillian.com/2013/01/retrieving-st-linkv2-firmware-from.html http://forum.easyelectr ...

  3. 虚拟机安装Linux过程和踩坑

    由于想学习node,服务器端大都使用Linux系统,所以就想着在笔记本上弄个虚拟机,装上Linux,使用xshell在window上操作也方便,也借此来熟悉一下Linux,接下来就解释下安装的步骤和遇 ...

  4. minor gc和full gc

    Minor GC ,Full GC 触发条件 Minor GC触发条件:当Eden区满时,触发Minor GC. Full GC触发条件: (1)调用System.gc时,系统建议执行Full GC, ...

  5. Selenium2+python自动化70-unittest之跳过用例(skip)

    前言 当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例 ...

  6. Mysql 会导致锁表的语法

    最近再找一些Mysql锁表原因,整理出来一部分sql语句会锁表的,方便查阅,整理的不是很全,都是工作中碰到的,会持续更新 笔者能力有限,如果有不正确的,或者不到位的地方,还请大家指出来,方便你我,方便 ...

  7. ARC中的@autoreleasepool还有作用吗?

    ARC中的@autoreleasepool还有作用吗? QUESTION For the most part with ARC (Automatic Reference Counting), we d ...

  8. RxJava 中文文档

    https://mcxiaoke.gitbooks.io/rxdocs/content/Subject.html

  9. jenkins的docker

    参考:https://store.docker.com/images/jenkins?tab=description https://my.oschina.net/jayqqaa12/blog/633 ...

  10. iOS:集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICollectionViewCell(创建表格的另一种控件)

    两种创建表格方式的比较:表格视图.集合视图(二者十分类似) <1>相同点:   表格视图:UITableView(位于storyboard中,通过UIViewController控制器实现 ...