<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>关于HTML编码 - by 杨元</title>
</head>
<body>
<h1>关于HTML编码</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>个人主页</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
{{#compare age 20}}
<td>{{homePage}}</td>
{{else}}
<td>{{{homePage}}}</td>
{{/compare}}
</tr>
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18,
"homePage":"<a href='javascript:void(0);'>张三的个人主页</a>"
},
{
"name": "李四",
"sex": "0",
"age": 22,
"homePage":"<a href='javascript:void(0);'>李四的个人主页</a>"
},
{
"name": "妞妞",
"sex": "1",
"age": 19,
"homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
}
]
}; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个比较数字大小的Helper,有options参数，块级Helper
Handlebars.registerHelper("compare",function(v1,v2,options){
//判断v1是否比v2大
if(v1>v2){
//继续执行
return options.fn(this);
}else{
//执行else部分
return options.inverse(this);
}
}); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
通过{{}}取出来的内容，都会经过编码，也就是说，如果取出的内容中包含html标签，会被转码成纯文本，不会被当成html解析，实际上就是做了类似这样的操作：把<用<替代。
这样做是很好的，既可以显示html代码，又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。
但是有时候我们可能需要解析html，不要转码，很简单，把{{}}换成{{{}}}就可以啦。
本例中，年龄大于20的童鞋个人主页被编码，直接展示出来；而年龄小于20的童鞋，个人主页被当成html解析，显示的是一个超链接。