之前用模板渲染都是用angular，无意间发现了jquery tmpl这种轻量级，其文档在这里

官方解释对该插件的说明：将匹配的第一个元素作为模板，render指定的数据，签名如下:

.tmpl([data,][options])

其中参数data的用途很明显：用于render的数据，可以是任意js类型，包括数组和对象。options一般情况下都是选项了，官方指出，此处的options是一个用户自定义的键值对的map，继承自tmplItem数据结构，适用于模板render动作期间。

在这里可以下载到最新的tmpl插件，值的一提的是，官方同时也说明了，tmpl目前是beta版，使用需谨慎..

下面是一个简单的例子

 <!DOCTYPE html>

 <html>

 <head>

     <title>jquery template demo</title>

     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

     <script type="text/javascript" src="js/jquery.tmpl.js"></script>

     <script id="myTemplate" type="text/x-jquery-tmpl">

         <tr><td>${ID}</td><td>${Name}</td></tr>

     </script>

     <script type="text/javascript">

         $(function () {

             var users = [{ ID: 'hao1', Name: 'Tony' }, { ID: 'hao2', Name: 'Mary hui'}];

             $('#myTemplate').tmpl(users).appendTo('#rows');

         });

     </script>

     <style type="text/css">

         body

         {

             padding: 10px;

         }

         table

         {

             border-collapse: collapse;

         }

     </style>

 </head>

 <body>

     <table cellspacing="0" cellpadding="4" border="1">

         <tbody id="rows">

         </tbody>

     </table>

 </body>

 </html>

其效果如下

定义模板时，推荐的方式为定义使用

<script id='templateName'  type='text/x-jquery-tmpl'></script>

做为模板的包装器，但定义方式并不只有这一种，你可以使用

<div id="template" style="display: none;"> <!-- markup --></div>

编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如:

HTML:

<table cellspacing="0" cellpadding="4" border="1">

   <tbody id="compileRows">

   </tbody>

</table>

JavaScript:

 <script id="compile1" type="text/x-jquery-tmpl">

     {{tmpl 'cached'}}

     <tr><td>${ID}</td><td>${Name}</td></tr>

 </script>

 <script id="compile2" type="type/x-jquery-tmpl">

     <tr><td colspan="2">${Group}</td></tr>

 </script>

 <script type="text/javascript">

     $(function () {

         var groupUsers = [{ ID: 'hao1', Name: 'Tony', Group: 'Administrators' }, { ID: 'hao2', Name: 'Mary hui', Group: 'Users'}];

         $('#compile2').template('cached');

         $('#compile1').tmpl(groupUsers).appendTo('#compileRows');

     });

 </script>

其效果如下

$.template()方法，将一段Html编译为模板，示例:

JavaScript

var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>';

$.template('template', markup);

$.tmpl('template', users).appendTo('#templateRows');

这样就可以将markup中定义的模板应用于templateRows对象。

jQuery .tmpl()的标签，表达式，属性：

${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{= field}}如:

<script id="myTemplate" type="text/x-jquery-tmpl">

    <tr><td>{{= ID}}</td><td>{{= Name}}</td></tr>

</script>

必须要注意的是，"="号后必须跟一个空格，不然是没有效果的。

jQuery .tmpl()有两个比较有用的属性:$item、$data:

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

Html

<table cellspacing="0" cellpadding="4" border="1">

     <tbody id="propertyRows">

     </tbody>

 </table>

Javascript

 <script id="property" type="text/x-jquery-tmpl">

     <tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs('; ')}</td></tr> </script>

 <script type="text/javascript">

      $(function () {

         var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}];

         $('#property').tmpl(userLangs, {

             getLangs: function (separator) {

                 return this.data.Langs.join(separator);

             }

          }).appendTo('#propertyRows');

       });

 </script>

{{each}}这个标签一看就知道是做循环用的了，用法如下：(关键词{{each Array}}、$value、$index)

HTML

<ul id="ul_each"></ul>

Javascript

 <script id="eachList" type="text/x-jquery-tmpl">

   <li class="li">

     <span class="a">ID: ${ID};</span>

     <span class="b">Name: ${Name};</span><br/>

     <span class="c">Langs:

       <ul>

         {{each Langs}}

           <li>

             ${$index + 1}:${$value}.

           </li>

         {{/each}}

       </ul>

     </span>

   </li>

 </script>

 <script type="text/javascript">

   $(function () {

     var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}];

     $('#eachList').tmpl(userLangs).appendTo('#ul_each');

   });

 </script>

其效果如下

{{each}}还有另一种写法:

Javascript

 <script id="eachList2" type="text/x-jquery-tmpl">

   <li class="li">

     <span class="a">ID: ${ID};</span>

     <span class="b">Name: ${Name};</span><br/>

     <span class="c">Langs:

       <ul>

         {{each(i,lang) Langs}}

           <li>

             ${i+1}:${lang}

           </li>

         {{/each}}

       </ul>

     </span>

   </li>

 </script>

作用和前一种是一样的。

{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例:

Javascript

 <script id="ifelse" type="text/x-jquery-tmpl">

      <tr>

         <td>${ID}</td>

         <td>${Name}</td>

         <td>

             {{if Langs.length > 1}}

                 ${Langs.join('; ')}

             {{else}}

                 ${Langs}

             {{/if}}

         </td>

     </tr>

 </script>

如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果如下：

{{html}}，直接将对象属性值作为HTML代码替换占位符

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

$('tbody').delegate('tr', 'click', function () {

    var item = $.tmplItem(this);

    alert(item.data.Name);

});

效果如下：

其它的大家可以自行浏览一起网站，如：http://www.cnblogs.com/piaopiao7891/archive/2013/04/22/3035122.html 希望对大家有所帮助。。。

jquery tmpl模板的更多相关文章

  1. artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

    artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

  2. atitit.jquery tmpl模板总结 .doc

    atitit.jquery tmpl模板总结 .doc 1. atitit.动态模版解析1 1.1. Jquery.tmpl.js1 1.2. 比起anrular js方便啊.1 2. 动态模板引擎解 ...

  3. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  4. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  5. JQuery模板插件-jquery.tmpl

    转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...

  6. jquery tmpl 详解

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

  7. jquery tmpl遍历

    最近发现大家用模板渲染一些顺带逻辑功能代码块时,用jquery tmpl较多,遇到了一些问题,现在就个人以前研究过的一切常用功能作介绍,主要针对遍历,其它的大家可以自行浏览一起网站,如:http:// ...

  8. jQuery tmpl用法总结

    之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/ ...

  9. JQuery.tmpl()的用法

    动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象, 为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 j ...

随机推荐

  1. SVN导出Maven项目

    1.从SVN检出项目 -> 作为工作空间中的项目检出 2.转换成Maven project 3.将Maven Project 转化成 Maven app 右击项目-> Properties ...

  2. UVA10341：Solve It（二分+math.h库）

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/E 题目要求:p*e-x+ q*sin(x) + r*co ...

  3. 面试题5：JS实现从尾到头打印单链表

    单链表,在内存中所占地址是不连续的.所以遍历单链表时:需要从头遍历.而题目要求输出的顺序:从尾到头.也就是说第一个遍历到的节点最后一个输出,而最后一个遍历到的节点第一个输出.这就是典型的“后进先出”, ...

  4. java static成员变量方法和非static成员变量方法的区别 ( 二 )

    原创文章,未经作者允许,禁止转载!!! 静态成员变量不用new对象,在类加载的过程中就已经初始化存放在数据区域,静态成员变量是类和所有对象共有的,类和对象都可以改变它的值,每一次改变值之后,静态成员变 ...

  5. To keep up-to-date with Latest Jordans 2016

    The Latest Jordans 2016 will feature cement speckling because the base, Reflect Silver accents, a a ...

  6. c++之旅:多态

    多态 同一消息根据发送对象的不同而产生不同的行为,多态是建立的在封装和继承的基础之上 一个小案例引发的问题 #include <iostream> using namespace std; ...

  7. webmagic的设计机制及原理-如何开发一个Java爬虫 转

    此文章是webmagic 0.1.0版的设计手册,后续版本的入门及用户手册请看这里:https://github.com/code4craft/webmagic/blob/master/user-ma ...

  8. Python学习示例源码

    函数和函数式编程 函数定义: 函数调用: 过程定义: 过程调用: 面向过程的编程方法: """ 面向对象-----类------class 面向过程-----过程---- ...

  9. C++文件操作：打开文件和写入文件

    如果程序的运行结果仅仅显示在屏幕上,当要再次查看结果时,必须将程序重新运行一遍:而且,这个结果也不能被保留. 如果希望程序的运行结果能够永久保留下来,供随时查阅或取用,则需要将其保存在文件中. 文件分 ...

  10. Python数据可视化：网易云音乐歌单

    通过Python对网易云音乐华语歌单数据的获取,对华语歌单数据进行可视化分析. 可视化库不采用pyecharts,来点新东西. 使用matplotlib可视化库,利用这个底层库来进行可视化展示. 推荐 ...