jquery jtemplates.js模板渲染引擎的详细用法第一篇 - CSDN博客

创建时间：2018/5/22 21:50
来源：https://blog.csdn.net/chenhongwu666/article/details/51798476

原
jquery jtemplates.js模板渲染引擎的详细用法第一篇
2016年07月01日 08:36:04
阅读数：9890

jquery jtemplates.js模板渲染引擎的详细用法第一篇

Author:ching

Date:2016-06-29

jTemplates是一个基于JQuery的模板引擎插件，功能强大，有了他你就再不用为使用JS绑定数据时发愁了。后端语言使用php,asp.net,jsp等都不是问题，使用模板渲染可以很大程度上提高程序性能，使用异步获取数据，不用整个页面都回发，好处当然不仅仅是这些。

下载jtemplates，官网的文档写得非常的详细

打开官网：http://jtemplates.tpython.com/

左侧找到Download，然后直接点击要下载的文件即可，当前最新版本是0.8.4

jTemplates配合jQuery的on或者delegate事件处理方法可以让你迷恋无法自拔。哈哈...

下面是详细用法总结：

jtemplates模板的简单使用，首先使用jtemplates就要使用json数据，在这里我们不妨构造一个json格式的数据，如下：

  1. <span style="font-family:'Microsoft YaHei';font-size:14px;">{  
  2.     "name" : "网马伦",  
  3.     "list_id" : 89757,  
  4.     "table":[  
  5.         {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},  
  6.         {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},  
  7.         {"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},  
  8.         {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},  
  9.         {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}  
  10.     ]  
  11. }  
  12. </span>  

 

接下来新建一个页面jtemplates_demo1.html

然后引入jquery,我这里使用的是jquery-2.1.1.min.js，你可以在这里下载http://www.jquery.com/

引入js文件代码如下：

[javascript] view plain copy
  1. <span style="font-family:'Microsoft YaHei';font-size:14px;"><script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>  
  2. <script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>  
  3. </span>  

 

接下来构造模板样式

代码如下：

[javascript] view plain copy
  1. <span style="font-family:'Microsoft YaHei';font-size:14px;">　　　　　　　　　　<textarea id="template" class="template">  
  2.             <div><strong>部门编号：{$T.list_id}</strong></div>  
  3.             <div><strong>负责人：{$T.name} </strong></div>  
  4.             <div>  
  5.                 <table>  
  6.                     <tr>  
  7.                         <th>编号</th>  
  8.                         <th>姓名</th>  
  9.                         <th>年龄</th>  
  10.                         <th>邮箱</th>  
  11.                     </tr>  
  12.                     {#foreach $T.table as record}  
  13.                     <tr>  
  14.                         <td>{$T.record.id}</td>  
  15.                         <td>{$T.record.name}</td>  
  16.                         <td>{$T.record.age}</td>  
  17.                         <td>{$T.record.mail}</td>  
  18.                     </tr>  
  19.                     {#/for}  
  20.                 </table>  
  21.             </div>  
  22.         </textarea>  
  23. </span>  

 

这个是我要最终显示的效果，也就是模板，然后模板定义好了，然后我们在定义一个最后用来承载显示数据的标签，一般用div或者其他标签均可，我这里使用div如下：

<div id="result"></div>

此时我们的显示数据的前台HTML标签就写好了，模板和result这两个的顺序没有要求，但是为了阅读方便这里使用如下顺序放置：

[javascript] view plain copy
  1. <span style="font-family:'Microsoft YaHei';font-size:14px;"><div id="result"></div>  
  2.         <textarea id="template" class="template">  
  3.             <div><strong>部门编号：{$T.list_id}</strong></div>  
  4.             <div><strong>负责人：{$T.name} </strong></div>  
  5.             <div>  
  6.                 <table>  
  7.                     <tr>  
  8.                         <th>编号</th>  
  9.                         <th>姓名</th>  
  10.                         <th>年龄</th>  
  11.                         <th>邮箱</th>  
  12.                     </tr>  
  13.                     {#foreach $T.table as record}  
  14.                     <tr>  
  15.                         <td>{$T.record.id}</td>  
  16.                         <td>{$T.record.name}</td>  
  17.                         <td>{$T.record.age}</td>  
  18.                         <td>{$T.record.mail}</td>  
  19.                     </tr>  
  20.                     {#/for}  
  21.                 </table>  
  22.             </div>  
  23.         </textarea>  
  24. </span>  

 

接下来就要在js中设置模板和处理数据啦，直接上代码，然后在解释代码的意思，代码如下：

[javascript] view plain copy
  1. <span style="font-family:'Microsoft YaHei';font-size:14px;"><script type="text/javascript">  
  2.     $(function(){  
  3.         // 初始化JSON数据  
  4.         var data = {  
  5.     "name" : "网马伦",  
  6.             "list_id" : 89757,  
  7.             "table":[  
  8.                 {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},  
  9.                 {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},  
  10.                 {"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},  
  11.                 {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},  
  12.                 {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}  
  13.             ]  
  14.         };  
  15.   
  16.         // 设置模板  
  17.         $("#result").setTemplateElement("template");  
  18.         // 给模板加载数据  
  19.         $("#result").processTemplate(data);  
  20.     });  
  21.     </script>  
  22. </span>  

 

首先我们在前面直接引用了jQuery，在这里直接写在$(function(){});里面就可以了，

$("#result").setTemplateElement("template");这一步非常关键，解释如下：

这一步的意思就是讲id="result"的div设置模板为id="template"，然后就是处理数据，这里的data就是json数据，这样就可以直接显示json数据了，这就是模板渲染，简单吧，下面是全部代码如下：

[javascript] view plain copy
  1. <span style="font-family:'Microsoft YaHei';font-size:14px;"><!doctype html>  
  2.   
  3. <html lang="zh-CN">  
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  6.     <title>jQuery - jTemplates</title>  
  7.     <link rel="stylesheet" type="text/css" href="./css/style.css">  
  8.     <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>  
  9.     <script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>  
  10.     <style type="text/css">  
  11.     .container{  
  12.         width: 1000px;  
  13.         height: 600px;  
  14.         margin: 0 auto;  
  15.     }  
  16.     .template{  
  17.         display: none;  
  18.     }  
  19.     table{  
  20.         background-color: #fff;  
  21.     }  
  22.     table tr th{  
  23.         padding: 8px;  
  24.         border-bottom: 1px solid #eee;  
  25.     }  
  26.     table tr td{  
  27.         padding: 10px;  
  28.         border-bottom: 1px solid #eee;  
  29.     }  
  30.     </style>  
  31.     <script type="text/javascript">  
  32.     $(function(){  
  33.         // 初始化JSON数据  
  34.         var data = {  
  35.             "name" : "网马伦",  
  36.             "list_id" : 89757,  
  37.             "table":[  
  38.                 {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},  
  39.                 {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},  
  40.                 {"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},  
  41.                 {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},  
  42.                 {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}  
  43.             ]  
  44.         };  
  45.   
  46.         // 设置模板  
  47.         $("#result").setTemplateElement("template");  
  48.         // 给模板加载数据  
  49.         $("#result").processTemplate(data);  
  50.     });  
  51.     </script>  
  52. </head>  
  53. <body>  
  54.     <div class="container">  
  55.         <div><h1>标题</h1></div>  
  56.         <div id="result"></div>  
  57.         <textarea id="template" class="template">  
  58.             <div><strong>部门编号：{$T.list_id}</strong></div>  
  59.             <div><strong>负责人：{$T.name} </strong></div>  
  60.             <div>  
  61.                 <table>  
  62.                     <tr>  
  63.                         <th>编号</th>  
  64.                         <th>姓名</th>  
  65.                         <th>年龄</th>  
  66.                         <th>邮箱</th>  
  67.                     </tr>  
  68.                     {#foreach $T.table as record}  
  69.                     <tr>  
  70.                         <td>{$T.record.id}</td>  
  71.                         <td>{$T.record.name}</td>  
  72.                         <td>{$T.record.age}</td>  
  73.                         <td>{$T.record.mail}</td>  
  74.                     </tr>  
  75.                     {#/for}  
  76.                 </table>  
  77.             </div>  
  78.         </textarea>  
  79.   
  80.         <!-- <textarea id="templateContainer" style="display: none;">   
  81.             <table>   
  82.                 <tr>   
  83.                     <td>Id</td>   
  84.                     <td>标题</td>   
  85.                     <td>发布时间</td>   
  86.                 </tr>   
  87.                 {#foreach $T.Lists as row}   
  88.                 <tr>   
  89.                     <td>{$T.row.Id}</td>   
  90.                     <td>{$T.row.Title}</td>   
  91.                     <td>{$T.row.CreateDate}</td>   
  92.                 </tr>   
  93.                 {#/for}   
  94.             </table>   
  95.         </textarea> -->  
  96.     </div>  
  97. </body>  
  98. </html>  
  99. </span>  

 

这里需要注意几点：

1、首先模板样式必须要用<textarea></textarea>标签，否则也可以放入

[javascript] view plain copy
  1. <span style="font-family:'Microsoft YaHei';font-size:14px;"><script id="template">  
  2. <div><strong>部门编号：{$T.list_id}</strong></div>  
  3.             <div><strong>负责人：{$T.name} </strong></div>  
  4.             <div>  
  5.                 <table>  
  6.                     <tr>  
  7.                         <th>编号</th>  
  8.                         <th>姓名</th>  
  9.                         <th>年龄</th>  
  10.                         <th>邮箱</th>  
  11.                     </tr>  
  12.                     {#foreach $T.table as record}  
  13.                     <tr>  
  14.                         <td>{$T.record.id}</td>  
  15.                         <td>{$T.record.name}</td>  
  16.                         <td>{$T.record.age}</td>  
  17.                         <td>{$T.record.mail}</td>  
  18.                     </tr>  
  19.                     {#/for}  
  20.                 </table>  
  21.             </div>  
  22. </script>  
  23. </span>  

 中，都是可以的

2、json格式必须是正确的，而且不能用单引号，都是双引号

最终显示效果如下：