文档章节

hbs helper分享

唯慕清风
 唯慕清风
发布于 2016/04/22 22:38
字数 513
阅读 32
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

最近项目中用到hbs模版,结合express,感觉还不错。其中,helper是handlebar的核心,为了让自己用得更爽,经过搜集和琢磨,留下一手helper,亲测有效。

1. block与extend

  • 源码
let blocks = {};
hbs.registerHelper('extend', function (name, context) {
    let block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }


    block.push(context.fn(this));
});


hbs.registerHelper('block', function (name) {
    let val = (blocks[name] || []).join('\n');
    blocks[name] = [];
    return val;
});
  • 使用

layout.hbs(page1页面母版)

<head>
    <meta charset="UTF-8">
    <title>{{{block "title"}}}</title>
</head>

page1.hbs(子页面)

{{#extend "title"}}
测试标题
{{/extend}}

=>

<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>

2. 包含

  • 源码
hbs.registerHelper('include', function (args1, args2, context) {
    let array = args2.split(',');
    if (!_.isArray(array)) {
        return context.inverse(this);
    }
    if (_.includes(array, args1) || _.includes(array, args1.toString())) {
        return context.fn(this);
    }
});
  • 使用
{{#include '1' '1,2,3'}}
'1' include in '1,2,3'
{{else}}
'1' not include in '1,2,3'
{{/include}}
---
{{#include 'b' 'c,d'}}
'b' include in 'c,d'
{{else}}
'b' not include in 'c,d'
{{/include}}

=>

'1' include in '1,2,3'
---
'b' not include in 'c,d'

3. 等于

  • 源码
hbs.registerHelper('equal', function (args1, args2, context) {
    if (args1 === args2) {
        //满足添加继续执行
        return context.fn(this);
    } else {
        if (typeof(args1) === 'number' && args1.toString() === args2.toString()) {
            return context.fn(this);
        }
        //不满足条件执行{{else}}部分
        return context.inverse(this);
    }
});
  • 使用
{{#equal 1 2}}
1 === 2
{{else}}
1 !== 2
{{/equal}}

=>

1 !== 2

4. 大于等于

  • 源码
hbs.registerHelper('egt', function (args1, args2, context) {
    if (args1 >= args2) {
        return context.fn(this);
    } else {
        return context.inverse(this);
    }


});
  • 使用同equal

5. 大于

  • 源码
hbs.registerHelper('gt', function (args1, args2, context) {
    if (args1 > args2) {
        return context.fn(this);
    } else {
        return context.inverse(this);
    }


});
  • 使用同equal

6. 小于等于

  • 源码
hbs.registerHelper('elt', function (args1, args2, context) {
    if (args1 <= args2) {
        return context.fn(this);
    } else {
        return context.inverse(this);
    }


});
  • 使用同equal

7. 小于

  • 源码
hbs.registerHelper('lt', function (args1, args2, context) {
    if (args1 < args2) {
        return context.fn(this);
    } else {
        return context.inverse(this);
    }


});
  • 使用同equal

8. 结合each实现遍历N次

  • 源码
hbs.registerHelper('count', function (args1, context) {
    let array = [];
    for (let i = 1; i <= args1; i++) {
        array.push(i);
    }
    return context.fn(array);
});
  • 使用
{{#count 5}}
  {{#each this |index|}}
    {{index}}、
  {{/each}}
{{/count}}

=>

1、2、3、4、5

9. 加法

  • 源码
hbs.registerHelper('add', function (args1, args2) {
    return args1 + args2;
});
  • 使用
{{add 1 2}}

=>

3

10. 减法

  • 源码
hbs.registerHelper('sub', function (args1, args2) {
    return args1 - args2;
});
  • 使用
{{sub 3 1}}

=>

2

© 著作权归作者所有

唯慕清风
粉丝 2
博文 17
码字总数 6867
作品 0
成都
前端工程师
私信 提问
Journey源码分析三:模板编译

在中提到了模板编译,这里详细说下启动流程 看下源码: 模板编译主要在函数中: 看下源码: 上面代码的核心代码是,该方法遍历主题目录中的文件,并调用函数,看下的源码: 如果是文件并且以结尾则...

葫芦咩
2015/09/07
76
0
基于 Koa平台Node.js开发的KoaHub.js的模板引擎代码

koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-handlebars Use with koa var koa = require('koa'); var hbs = require('koahub-han......

NUANUAA
2016/09/29
338
0
Ember版本小小结

原文地址:http://120.24.90.140:2368/ember-summer/ 不得不说Ember更新实在是太快了!!现在(2015-11-23)已经更新到2.2.0版本了。随着版本的升级很多旧版的特性会被声明为过是,甚至是弃用...

ubuntuvim
2016/01/25
111
0
Express新手入坑笔记之Handlebars模板继承

续Express新手入坑笔记之动态渲染HTML,上一篇只是初步实现了html的动态渲染,但不够灵活, 如果写一个动态网站, 会遇到大量模板复用的场景, 为每个url写一个单独的html文件是非常耗时耗力的, 而...

木子昭
2018/12/13
0
0
环境搭建以及使用Ember.js创建第一个静态页面

转载于:环境搭建以及使用Ember.js创建第一个静态页面 本篇将为读者介绍Ember项目开发环境的搭建,并创建一个静态页面。 安装Ember CLI 本教程使用的是版本的Ember CLI工具集,如果你的是版本...

ubuntuvim
2016/03/31
167
8

没有更多内容

加载失败,请刷新页面

加载更多

在C语言中“静态”是什么意思?

我已经在C代码的不同地方看到了static一词。 这就像C#中的静态函数/类(实现在对象之间共享)吗? #1楼 多文件变量作用域示例 在这里,我说明了静态如何影响多个文件中函数定义的范围。 交流...

javail
5分钟前
3
0
利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务

作者:泽尘 简介 随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验。目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的...

阿里巴巴云原生
7分钟前
2
0
前端架构最佳实践

Folders-by-Feature Structure 胜过 Folders-by-Type Structure

lilugirl
18分钟前
3
0
Seata AT 模式启动源码分析

从上一篇文章「分布式事务中间件Seata的设计原理」讲了下 Seata AT 模式的一些设计原理,从中也知道了 AT 模式的三个角色(RM、TM、TC),接下来我会更新 Seata 源码分析系列文章。今天就来分...

后端进阶
19分钟前
3
0
Python中“自我”一词的目的是什么?

Python中self词的目的是什么? 我知道它是指从该类创建的特定对象,但是我看不到为什么要将它显式地作为参数添加到每个函数中。 为了说明这一点,在Ruby中,我可以这样做: class myClass ...

技术盛宴
21分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部