兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html)
<!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,不要转码,很简单,把{{}}换成{{{}}}就可以啦。