前端模板引擎Handlebars的使用总结（二）

最新推荐文章于 2022-02-10 15:58:47 发布

caicai1171523597

最新推荐文章于 2022-02-10 15:58:47 发布

阅读量828

点赞数

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/caicai1171523597/article/details/86642557

版权

web前端专栏收录该内容

27 篇文章 5 订阅

订阅专栏

一、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.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

caicai1171523597

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端模板引擎Handlebars的使用总结（二）

一、Handlebars模板的转义问题1.模板中当使用{{ }}时，转义，输出HTML字符串当使用{{{ }}}时，不转义（识别html标签属性），输出HTML2.Helpers中当return '&lt;span style='color:red'&gt;safe string&lt;/span&gt;' 时，转义，输出HTML字符串当ret...
复制链接

扫一扫