hbs helper分享

2019独角兽企业重金招聘Python工程师标准>>>

最近项目中用到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}}

10. 减法

源码

hbs.registerHelper('sub', function (args1, args2) {return args1 - args2;
});

使用

{{sub 3 1}}

转载于:https://my.oschina.net/u/1583186/blog/664718

hbs helper分享相关推荐

晒一手hbs helper
最近项目中用到hbs模版,结合express,感觉还不错.其中,helper是handlebar的核心,为了让自己用得更爽,经过搜集和琢磨,留下一手helper,亲测有效. 1. block与exte ...
amazeui中内置的web组件有哪些且如何用
amazeui中内置的web组件有哪些且如何用一.总结一句话总结: 1.组件还是jquery.js+amazeui.js,和插件一样,准确的说是amazeui.css+jquery.js+amaz ...
分享一个WininetAPI的helper类
using System; using System.Collections; using System.Drawing; using System.IO; using System.Net; usi ...
部门内 IDEA 分享，超实用技巧！
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源:https://segmentfault.com/a ...
分享：给入职新人的IDEA培训教程。
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者:Richard_Yi 链接:http://1t.click/ ...
Precision Helper:最佳免费 CHM 制作软件
许多用户都有制作 CHM 文档的经历,或许是为了与他人分享资料,或许是为自己开发软件提供帮助.尽管网上搜索CHM制作软件结果繁多,但真正好用的并不多,能称为优秀的只剩下几款.其中我觉得优秀又免费的只有 ...
IntelliJ IDEA 超实用技巧分享，不能再全了！
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多作者:R ...
浏览器插件-- Browser Helper Object（BHO）一
最近由于需要写一个这方面的网页过滤插件,因此可说得上是费尽了心机.参阅了很多资料,在这里感谢那些愿意把自己的心得拿出来与人分享的广大同行. 转载请说明来自飞天猪的博客园.另外如果发现有错误,请留 ...
按钮开始多线程_微软MR技术专家分享：AR/VR多线程处理的八年经验与技巧
查看引用/信息源请点击:映维网关于多线程的经验分享 (映维网 2020年11月17日)多线程(Multithreading)是指从软件或者硬件实现多个线程并发执行的技术.具有多线程能力的计算机因有硬 ...

hbs helper分享

hbs helper分享相关推荐

最新文章

热门文章