晒一手hbs helper

linkFly 发布于2019-08-19 18:04 / 2188人阅读

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

最近项目中用到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("
");
    blocks[name] = [];
    return val;
});

使用

layout.hbs(page1页面母版)


    
    {{{block "title"}}}

page1.hbs(子页面)

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


    
    测试标题

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}}

GPU云服务器云服务器 hbs hbs存储 helpers Helper

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79152.html

Handlebars partials 隐藏的力量

摘要：和再来分别看看每个文件文件首先是有些值得注意的地方，拆开来单独看引入了一个虚构的。部分我们又用了，不同的是我们用了基本来指定默认内容。文件拼图的下一部分就是。我们也用到了，同时还有，下面是的示例同样拆开来看看这里又用到了。一个项目的机会再加上我自己的探索，让我对Handlebars partials有了更深的理解。事实证明，你可以做得比我了解的更多。我最近在负责一个小项目，只有很少...

sixleaves 2019-08-23 11:57 评论0 收藏0
环境搭建以及使用Ember.js创建第一个静态页面

摘要：原文环境搭建以及使用创建第一个静态页面本篇将为读者介绍项目开发环境的搭建，并创建一个静态页面。在文件中增加如下内容使用快捷键关闭在用命令启动项目。创建一个模板仍然是使用命令创建模板。原文：环境搭建以及使用Ember.js创建第一个静态页面本篇将为读者介绍Ember项目开发环境的搭建，并创建一个静态页面。安装Ember CLI 本教程使用的是2.4.3版本的Ember CLI工具集...

pinecone 2019-08-19 18:21 评论0 收藏0
前端模板引擎 - Handlebars

摘要：前端模板引擎参考参考参考后缀名的后缀有两种，全称的以及简称的条件表达式条件为真时，才执行待渲染数据上海模板片段表示当前作用域表示上一级作用域条件表达式条件为假时，才执行路径表示当前作用域表示上一级作用域块在中每一个都前端模板引擎 Handlebars 参考1参考2参考3 后缀名 Handlebars的后缀有两种，全称的handlebars以及简称的hbs index.handle...

helloworldcoding 2019-08-22 16:10 评论0 收藏0
[Tips on Ember 2] UI 布局与应用状态的关系处理

摘要：如果说传统的前端开发是以页面为中心来入手的话，那么现代的应用开发就是以状态为中心来着手设计和开发的。初步分析路由是怎么管理状态的复杂的话题简单说在中，应用的每一个可能的状态都是通过体现的。引子 SPA（单页面应用）的核心是什么？自该类型应用诞生以来我最多思考的问题就是这个。现在前端 SPA 框架满天飞，许多不是框架的也被称作框架，究竟有什么代表性的层（layer）能让一个系统称得上...

wayneli 2019-08-21 10:39 评论0 收藏0
「译」 MapReduce in MongoDB

摘要：在第行中，我们会从集合取得结果并显示它。的逻辑在中，我们要以性别作为，然后以作为。年龄是用来做计算用的，而名字只是用来显示给人看的。我们要检查所有和性别相关的年龄，找到年龄最大和最小的用户。在这篇文章里面，我们会演示如何在 MongoDB 中使用 MapReduce 操作。我们会用 dummy-json 这个包来生成一些虚假的数据，然后用 Mongojs 如果想要快速看到结果，可以到...

ConardLi 2019-06-26 17:02 评论0 收藏0