成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

曬一手hbs helper

linkFly / 2210人閱讀

摘要：最近項(xiàng)目中用到模版，結(jié)合，感覺還不錯(cuò)。其中，是的核心，為了讓自己用得更爽，經(jīng)過搜集和琢磨，留下一手，親測(cè)有效。

最近項(xiàng)目中用到hbs模版，結(jié)合express，感覺還不錯(cuò)。其中，helper是handlebar的核心，為了讓自己用得更爽，經(jīng)過搜集和琢磨，留下一手helper，親測(cè)有效。

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"}}
測(cè)試標(biāo)題
{{/extend}}

=>


    
    測(cè)試標(biāo)題

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) {
        //滿足添加繼續(xù)執(zhí)行
        return context.fn(this);
    } else {
        if (typeof(args1) === "number" && args1.toString() === args2.toString()) {
            return context.fn(this);
        }
        //不滿足條件執(zhí)行{{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. 結(jié)合each實(shí)現(xiàn)遍歷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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79152.html

相關(guān)文章

  • Handlebars partials 隱藏的力量

    摘要：和再來分別看看每個(gè)文件文件首先是有些值得注意的地方，拆開來單獨(dú)看引入了一個(gè)虛構(gòu)的。部分我們又用了，不同的是我們用了基本來指定默認(rèn)內(nèi)容。文件拼圖的下一部分就是。我們也用到了，同時(shí)還有，下面是的示例同樣拆開來看看這里又用到了。 一個(gè)項(xiàng)目的機(jī)會(huì)再加上我自己的探索，讓我對(duì)Handlebars partials有了更深的理解。事實(shí)證明，你可以做得比我了解的更多。 我最近在負(fù)責(zé)一個(gè)小項(xiàng)目，只有很少...

    sixleaves 評(píng)論0 收藏0

  • 環(huán)境搭建以及使用Ember.js創(chuàng)建第一個(gè)靜態(tài)頁面

    摘要：原文環(huán)境搭建以及使用創(chuàng)建第一個(gè)靜態(tài)頁面本篇將為讀者介紹項(xiàng)目開發(fā)環(huán)境的搭建，并創(chuàng)建一個(gè)靜態(tài)頁面。在文件中增加如下內(nèi)容使用快捷鍵關(guān)閉在用命令啟動(dòng)項(xiàng)目。創(chuàng)建一個(gè)模板仍然是使用命令創(chuàng)建模板。 原文：環(huán)境搭建以及使用Ember.js創(chuàng)建第一個(gè)靜態(tài)頁面 本篇將為讀者介紹Ember項(xiàng)目開發(fā)環(huán)境的搭建，并創(chuàng)建一個(gè)靜態(tài)頁面。 安裝Ember CLI 本教程使用的是2.4.3版本的Ember CLI工具集...

    pinecone 評(píng)論0 收藏0

  • 前端模板引擎 - Handlebars

    摘要：前端模板引擎參考參考參考后綴名的后綴有兩種，全稱的以及簡稱的條件表達(dá)式條件為真時(shí)，才執(zhí)行待渲染數(shù)據(jù)上海模板片段表示當(dāng)前作用域表示上一級(jí)作用域條件表達(dá)式條件為假時(shí)，才執(zhí)行路徑表示當(dāng)前作用域表示上一級(jí)作用域塊在中每一個(gè)都 前端模板引擎 Handlebars 參考1參考2參考3 后綴名 Handlebars的后綴有兩種，全稱的handlebars以及簡稱的hbs index.handle...

    helloworldcoding 評(píng)論0 收藏0

  • [Tips on Ember 2] UI 布局與應(yīng)用狀態(tài)的關(guān)系處理

    摘要：如果說傳統(tǒng)的前端開發(fā)是以頁面為中心來入手的話，那么現(xiàn)代的應(yīng)用開發(fā)就是以狀態(tài)為中心來著手設(shè)計(jì)和開發(fā)的。初步分析路由是怎么管理狀態(tài)的復(fù)雜的話題簡單說在中，應(yīng)用的每一個(gè)可能的狀態(tài)都是通過體現(xiàn)的。 引子 SPA（單頁面應(yīng)用）的核心是什么？ 自該類型應(yīng)用誕生以來我最多思考的問題就是這個(gè)?，F(xiàn)在前端 SPA 框架滿天飛，許多不是框架的也被稱作框架，究竟有什么代表性的層（layer）能讓一個(gè)系統(tǒng)稱得上...

    wayneli 評(píng)論0 收藏0

  • 「譯」 MapReduce in MongoDB

    摘要：在第行中，我們會(huì)從集合取得結(jié)果并顯示它。的邏輯在中，我們要以性別作為，然后以作為。年齡是用來做計(jì)算用的，而名字只是用來顯示給人看的。我們要檢查所有和性別相關(guān)的年齡，找到年齡最大和最小的用戶。 在這篇文章里面，我們會(huì)演示如何在 MongoDB 中使用 MapReduce 操作。我們會(huì)用 dummy-json 這個(gè)包來生成一些虛假的數(shù)據(jù)，然后用 Mongojs 如果想要快速看到結(jié)果，可以到...

    ConardLi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<