前台模板引擎Handlebars的使用总结（二）
一、Handlebars模板的转义问题
1.模板中
当使用{{ }}时，转义，输出HTML字符串
当使用{{{ }}}时，不转义（识别html标签属性），输出HTML
2.Helpers中
当return ‘<span style=’color:red’>safe string</span>’ 时，转义，输出HTML字符串
当return new Handlebars.SafeString(‘<span style=’color:red’>safe string</span>’)时，不转义，输出HTML
在模板中：
<script id="entry-template" type="text/template"> <div> <h2>{{title}}</h2> <h3>转义：{{content}}</h3> <h3>不转义：{{{content}}}</h3> </div></script><script type="text/javascript"> var source = $("#entry-template").html(); var template = Handlebars.compile(source); //定义要展现的数据 var context = { title: "测试转义内容", content: "<span style='color:red'>请看我的字体颜色</span>"}; var html = template(context); $("body").html(html);</script>
效果图
在Helpers中:
/** * 分割字符串，默认英文逗号分隔,得到图片的路径并返回img标签，不转义 */Handlebars.registerHelper('splitBySymbol', function(tag) { var ret = "",symbolTag=","; if(tag!= null && tag!=""){ var tags = tag.split(symbolTag); if(tags!=null && tags.length > 0){ for(var i=0, j=tags.length; i<j; i++) { ret = ret + "<img src='"+tags[i]+"'/>"; } return new Handlebars.SafeString(ret); } }else{ return ""; } return new Handlebars.SafeString(ret);});二、自己设置Helpers转义json字符串并获取对应key的value
/** * 自己设置Helper转换json字符串，并获取对应的值 * getJsonValueByKey：函数名 * str：json字符串 * key：要获取json对象键名称 * */ Handlebars.registerHelper("getJsonValueByKey",function(str,key) { if(str==null || str=="") { return str; } if(typeof str === "string"){ return JSON.parse(str)[key]; } return ""; });示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="//code.jquery.com/jquery-1.8.2.min.js"></script> <script src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script> <title>handlebars</title></head><body></body><script id="entry-template" type="text/template"> <div> <h2>{{title}}</h2> <h3>今天是 <span>{{getJsonValueByKey date 'year'}}年</span> <span>{{getJsonValueByKey date 'month'}}月</span> <span>{{getJsonValueByKey date 'day'}}日</span> </h3> </div></script><script type="text/javascript"> /** * 自己设置Helper转换json字符串，并获取对应的值 * getJsonValueByKey：函数名 * str：json字符串 * key：要获取json对象键名称 * */ Handlebars.registerHelper("getJsonValueByKey",function(str,key) { if(str==null || str=="") { return str; } if(typeof str === "string"){ return JSON.parse(str)[key]; } return ""; }); var source = $("#entry-template").html(); var template = Handlebars.compile(source); //定义要展现的数据 var context = { title: "自己设置Helpers转义json字符串并获取对应key的value", date: '{"year":"2018","month":"12","day":"22"}' }; var html = template(context); $("body").html(html);</script></html>效果图如下：
三、自己设置Helpers判断两个变量能否相等
Handlebars.registerHelper('eq', function(v1, v2, opts) { if(v1 == v2){ return opts.fn(this); }else{ /*取反，执行模板里面的else语句*/ return opts.inverse(this); }});示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="//code.jquery.com/jquery-1.8.2.min.js"></script> <script src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script> <title>handlebars</title></head><body></body><script id="entry-template" type="text/template"> <h3> {{#eq num 12}} 现在是{{this.num}}月份 {{else}} 现在不是{{this.num}}月份 {{/eq}} </h3></script><script type="text/javascript"> Handlebars.registerHelper('eq', function(v1, v2, opts) { if(v1 == v2){ return opts.fn(this); }else{ /*取反，执行模板里面的else语句*/ return opts.inverse(this); } }); var source = $("#entry-template").html(); var template = Handlebars.compile(source); //定义要展现的数据 var context = { num:12 }; var html = template(context); $("body").html(html);</script></html>
效果图
四、使用.来访问属性，使用../来访问父级属性
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="//code.jquery.com/jquery-1.8.2.min.js"></script> <script src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script> <title>handlebars</title></head><body></body><script id="entry-template" type="text/template"> {{#each author}} <h1>标题：{{../title}}</h1> <h2>姓名：{{this.name}}</h2> <h3>年龄：{{this.age}}</h3> {{/each}}</script><script type="text/javascript"> var source = $("#entry-template").html(); var template = Handlebars.compile(source); //定义要展现的数据 var context = { title: "This is title", id:20, author: [{ name: "王一博", age: 20 }], content: "This is content" } var html = template(context); $("body").html(html);</script></html>
原文作者技术博客：https://www.songma.com/u/ac4daaeecdfe
95后前台妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台模板引擎Handlebars的使用总结（二）
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台模板引擎Handlebars的使用总结（二）
