曬一手hbs helper

linkFly 發布于2019-08-19 18:04 / 2192人閱讀

摘要：最近項目中用到模版，結合，感覺還不錯。其中，是的核心，為了讓自己用得更爽，經過搜集和琢磨，留下一手，親測有效。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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（單頁面應用）的核心是什么？自該類型應用誕生以來我最多思考的問題就是這個?，F在前端 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