1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>关于HTML编码</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代码,又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。
但是有时候我们可能需要解析html,不要转码,很简单,把{{}}换成{{{}}}就可以啦。
本例中,年龄大于20的童鞋个人主页被编码,直接展示出来;而年龄小于20的童鞋,个人主页被当成html解析,显示的是一个超链接。
转载请注明:前端录»js模版引擎handlebars.js实用教程——关于HTML编码
<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-73-2"></script>