js模版引擎handlebars.js实用教程——关于HTML编码

时间 2019-11-08

标签模版引擎 handlebars.js handlebars 实用教程关于 html 编码栏目 JavaScript 繁體版

原文原文链接

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5     <title>关于HTML编码 - by 杨元</title>
 6   </head>
 7   <body>
 8     <h1>关于HTML编码</h1>
 9     <!--基础html框架-->
10     <table>
11       <thead>
12         <tr>
13           <th>姓名</th>
14           <th>性别</th>
15           <th>年龄</th>
16           <th>我的主页</th>
17         </tr>
18       </thead>
19       <tbody id="tableList">
20         
21       </tbody>
22     </table>
23     
24     <!--插件引用-->
25     <script type="text/javascript" src="script/jquery.js"></script>
26     <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
27     
28     <!--Handlebars.js模版-->
29     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操做语句-->
30     <!--id能够用来惟一肯定一个模版,type是模版固定的写法-->
31     <script id="table-template" type="text/x-handlebars-template">
32       {{#each student}}
33         <tr>
34           <td>{{name}}</td>
35           <td>{{sex}}</td>
36           <td>{{age}}</td>
37           {{#compare age 20}}
38             <td>{{homePage}}</td>
39           {{else}}
40             <td>{{{homePage}}}</td>
41           {{/compare}}
42         </tr> 
43       {{/each}}
44     </script>
45     
46     <!--进行数据处理、html构造-->
47     <script type="text/javascript">
48       $(document).ready(function() {
49         //模拟的json对象
50         var data = {
51                     "student": [
52                         {
53                             "name": "张三",
54                             "sex": "0",
55                             "age": 18,
56                             "homePage":"<a href='javascript:void(0);'>张三的我的主页</a>"
57                         },
58                         {
59                             "name": "李四",
60                             "sex": "0",
61                             "age": 22,
62                             "homePage":"<a href='javascript:void(0);'>李四的我的主页</a>"
63                         },
64                         {
65                             "name": "妞妞",
66                             "sex": "1",
67                             "age": 19,
68                             "homePage":"<a href='javascript:void(0);'>妞妞的我的主页</a>"
69                         }
70                     ]
71                 };
72         
73         //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架
74         //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
75         var myTemplate = Handlebars.compile($("#table-template").html());
76         
77         //注册一个比较数字大小的Helper,有options参数，块级Helper
78         Handlebars.registerHelper("compare",function(v1,v2,options){
79           //判断v1是否比v2大
80           if(v1>v2){
81             //继续执行
82             return options.fn(this);
83           }else{
84             //执行else部分
85             return options.inverse(this);
86           }
87         });
88         
89         //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。
90         $('#tableList').html(myTemplate(data));
91       });
92     </script>
93   </body>
94 </html>

经过{{}}取出来的内容，都会通过编码，也就是说，若是取出的内容中包含html标签，会被转码成纯文本，不会被当成html解析，实际上就是作了相似这样的操做：把<用<替代。html

这样作是很好的，既能够显示html代码，又能够避免xss注入。这个功能在作代码展现的时候是很是有用的。java

可是有时候咱们可能须要解析html，不要转码，很简单，把{{}}换成{{{}}}就能够啦。jquery

本例中，年龄大于20的童鞋我的主页被编码，直接展现出来；而年龄小于20的童鞋，我的主页被当成html解析，显示的是一个超连接。json