返回目录

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

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

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

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

js模版引擎handlebars.js实用教程——关于HTML编码的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  3. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  4. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  5. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  7. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  8. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  10. js模版引擎handlebars.js实用教程——if-判断的基本用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. js校验输入字符串的字节长度

    //检查输入字符串字节长度 function fucCheckLength(strTemp) { var i,sum; sum=0; var length = strTemp.length ; for ...

  2. vs2015 无法启动IIS Express Web服务器

    今天在VS2015上装了 之后无法启动IIS Express Web服务器. 然后我去查看了windows日志发现vs创建的虚拟目录不见了(至于是不是以上原因导致的没去查明) 然后在vs2015中点击 ...

  3. php怎么解决超链接中的中文参数转码问题？

    如题,我需要通过前端的网页传递一个中文参数(如:电脑)给后端的PHP文件,传递方式是通过超链接 "index.php/search/keyword/电脑" ,很明显的中文在传递过程 ...

  4. 【线段树】bzoj1018 [SHOI2008]堵塞的交通traffic

    线段树的每个叶子节点存一列. 每个节点维护六个域,分别是左上左下.左上右上.左上右下.左下右上.左下右下.右上右下在区间内部的连通性,不考虑绕出去的情况. 初始每个叶子的左上左下.右上右下是连通的. ...

  5. c#对数据库访问完应关闭连接

    1.对数据库的连接SqlConnection con = new SqlConnection(constr);使用完成后,应该至少应该close或dispose关闭.否则会导致数据库例如(SQl200 ...

  6. Opacity多浏览器透明度兼容处理

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  7. ArcGIS API ArcGISDynamicMapServiceLayer.setVisibleLayers对带有GroupLayer图层组的数据无效（针对LayerInfo）问题探讨

    首先看下setVisibleLayers方法: setVisibleLayers(ids, doNotRefresh?) Sets the visible layers of the exported ...

  8. jquery设置元素的readonly和disabled

    jquery设置元素的readonly和disabled Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: $( '#line2Tr' ).cs ...

  9. poi解析excel 03、07

    maven依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...

  10. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片，上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...