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

返回目录

 

 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解析，实际上就是做了类似这样的操作：把<用&lt;替代。

     这样做是很好的，既可以显示html代码，又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。

     但是有时候我们可能需要解析html，不要转码，很简单，把{{}}换成{{{}}}就可以啦。

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

 

 

 

posted @ 2013-12-12 16:13  杨元  阅读(16997)  评论(3)  编辑  收藏  举报