handlebars自定義helper的寫法

2021-07-10 08:19:42 字數 3805 閱讀 8766

helper大概可以分為兩類,一類是用於格式化輸出資料,使用起來像這樣:},官方沒有給起名字,我姑且叫做簡單helper好了。另一類叫塊級helper,塊級helper有自己的作用域,可以拿到上下文資料,並可以定義渲染的內容,可以發揮的作用就比較大了。通過這兩類helper,handlebars由乙個弱邏輯的模板可以擴充套件出很強大的功能。通過registerhelper方法,我們便可以註冊乙個helper。下面先看一下簡單helper。

簡單helper主要用來對資料進行格式化,例如我們經常會格式化日期、數字、金額等等。看乙個例子就明白了,此處我寫乙個把數字進行千分位分割的helper,所謂千分位分割就是把123456789這樣的值格式化為123,456,789.**如下:

handlebars.registerhelper('formatnumber', function

(num, options))+(?:\.|$))(\d(\.\d+$)?)/g,',$1'

); });

然後就可以在模板中使用:

}
registerhelper的第乙個引數是helper的名稱,我這裡把它叫做formatnumber,第二個引數是乙個函式,該函式傳入的第乙個引數就是我們在使用helper時候的值,如上面的num,最後,函式return的內容就是我們模板中輸出的內容。此外還會傳入第二個引數options,options是乙個物件,包含上下文相關的一些資訊,不過在簡單helper中用不到,我們會下面在塊級helper中詳細說說。

乙個簡單helper的定義就是如此簡單,真如其名~

塊級helper的能力就強大很多,可以實現一些自己想要的迭代器,或者增強判斷語句等。主要依賴的就是這個options引數。下面通過乙個例子來說明一下。

handlebars的if語句只能進行true/false判斷,如果我們想判斷乙個數字是否是偶數,我這麼寫是不可以的:},if不支援表示式,也不支援==這樣的操作符。所以要想在模板中判斷偶數,我們需要定義乙個helper。**如下:

//

判斷是否是偶數

handlebars.registerhelper('if_even', function

(value, options)

console.log('fn(this):', options.fn(this

)); //

fn(this): 2是偶數

if((value % 2) == 0

) else

});

然後我們造乙個資料,寫在模板中來看看:

var

data3 =

模板中:

}

}是偶數

} }是奇數

}

得到的結果是輸出「2是偶數」。通過在**中log出的資料,可以看到用this可以取到當前的上下文主體,此處就是我們的定義好的資料物件了。另外乙個比較重要的就是options.fn方法,此方法可以將你傳入的上下文主體編譯到模板,返回編譯後的結果,在helper中,我們把this傳了進去,於是在模板中也可以引用到它。最終options.fn返回編譯後的結果:2是偶數。其實你也可以為options.fn傳入其他的上下文物件,比如你要寫乙個迭代器,可以把陣列的元素依次傳入。

此處我們還看到了另乙個方法,options.inverse,它是取相反的意思,對應了我們模板中的}標籤,它會編譯}中的的內容並返回結果,如果我們的helper中需要帶else邏輯,用它就可以了。

塊級helper在用的時候開頭要加"#",並且要有結束符,就是上面的}

自定義helper可以傳入多個引數,只要依次寫在registerhelper的函式中就可以了,看下面乙個例子。

由於handlebars內建的if語句太弱,有時候我們需要判斷像==、!=、>、《這樣的邏輯,就必須自己寫定義helper了。這樣的helper需要傳入左右運算元還有操作符,引數不只乙個。下面這個compare是從別的地方抄來的,也是我在專案中用的最多的:

handlebars.registerhelper('compare', function

(left, operator, right, options)

var operators =,

'===': function

(l, r) ,

'!=': function

(l, r) ,

'!==': function

(l, r) ,

'(l, r) ,

'>': function

(l, r) ,

'<=': function

(l, r) ,

'>=': function

(l, r) ,

'typeof': function

(l, r)

};if (!operators[operator])

var result =operators[operator](left, right);

if(result)

else

});

view code

使用的時候是這樣:

}

他的名字是peter

}他的名字不是peter

}

可以看到在模板中傳入的引數依次對應helper定義中的left、operator、options。同時定義中也是用了options.inverse,用來處理else的邏輯。

在模板中使用helper的時候,我們還可以為helper傳入一些變數引數,叫做hash引數,在helper中可以通過options.hash拿到這些引數進行處理。這樣helper的靈活性和可復用性就大大增強了。我們還是舉例來說明。

定義乙個名為list的helper,它的作用是迴圈輸出資料,並把資料報裹在ul>li標籤中。同時為了給元素增加不同的class,我把class名稱作為hash來傳入。helper**如下:

handlebars.registerhelper('list', function

(items, options)

return out + 'ul>';

});

在模板中,我使用了兩次list,並傳入不同的hash值:

}}-----}}

}}-----}}

定義以下資料做測試:

var

data =,,]

}

最終頁面上生成的節點如下所示:

這樣我們就重用了同乙個helper,完成了更加靈活的任務。看到這裡,是不是覺得helper很強大了呢,利用上面這些特性,我們可以寫出非常豐富的功能了,足以滿足開發需求。

另外還有兩點的小知識,補充在此處:

1. helper的銷毀

呼叫handlebars.unregisterhelper('list')即可銷毀乙個helper

2. 一次註冊多個helper

andlebars

.registerhelper(

, bar:

function

() {}

});

handlebars作為乙個弱邏輯的靜態模板引擎,本身簡單好用,沒有太多冗餘的東西,同時還提供了強大的擴充套件性,這也是我喜歡它的原因。希望通過本篇文章能讓你更多的了解handlebars的helper,開始喜歡上它。

本文的擴充套件連線:

大家要擴充套件的話可以進去學學!就是這個連線裡面給我的思路

handlebars自定義helper的寫法

helper大概可以分為兩類,一類是用於格式化輸出資料,使用起來像這樣 官方沒有給起名字,我姑且叫做簡單helper好了。另一類叫塊級helper,塊級helper有自己的作用域,可以拿到上下文資料,並可以定義渲染的內容,可以發揮的作用就比較大了。通過這兩類helper,handlebars由乙個弱...

自定義 如何自定義協議

何為自定義協議,其實是相對標準協議來說的,這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等,如果我們在網路通訊的過程中不去使用這些標準協議,那就需要自定義協議,比如我們常用的rpc框架 dubbo,thrift 分布式快取 redis,memcached 等都是自定義...

自定義控制項 自定義鐘錶

private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...