Handlebars表達式是Handlebars模板的基本單元,可以單獨在{{mustache}}中使用它,將它們傳入Handlebars helper,或將它們作爲hash arguments的值使用
基本使用
<h1>{{title}}</h1>
這個表達式的意思是:在當前上下文中查找title
屬性
Handlebars也可以使用.
來分隔標識符,這類表達式被稱爲path
<h1>{{article.title}}</h1>
這個表達式的意思是:在當前上下文中查找article
屬性,並在查找結果中查找title
屬性
也支持用/
來分隔,但不推薦使用
標識符可以是任何Unicode編碼的字符,除了:
空格 ! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~
要引用一個不是合法標識符的屬性,可以用方括號[
,如:
{{#each articles.[10].[#comments]}}
<h1>{{subject}}</h1>
<div>
{{body}}
</div>
{{/each}}
上述articles.[10].[#comments]
相當於JavaScript中的articles[10]['#comments']
當使用{{expression}}時,handlebars會轉義其中的html內容,而使用{{{expression}}}時不會轉義
Handlebars.registerHelper('link', function(str){
return '<span>'+ str +'</span>';
});
{{link 'hello'}} //<span>hello</span>
{{{link 'hello'}}} //hello
Helpers
handlebars helper相當於一個函數,先在js代碼中註冊一個helper:
Handlebars.registerHelper('link', function(str){
return '<span>'+ str +'</span>';
});
然後在模板文件中調用helper,第一個標識符爲註冊的helper的名稱,在本例中爲”link”,後面跟着helper回調函數的參數,可以是0個或多個,用空格隔開
{{{link 'hello'}}}
此外,handlebars還可以接收一些可選的鍵值對序列作爲helper回調函數最後一個參數的值(這在Handlebars中被稱爲hash arguments)。
hash arguments的key是一個普通的標識符,value則是一個Handlebars表達式,因此可以是標識符、path或字符串
模板文件中:
{{{hash 'hello' href='world'}}}
handlebars.registerHelper('hash', function(str, options){
console.log(options.hash);
});
輸出
{ href: 'world' }
子表達式
Handlebars支持子表達式,可以在一個mustache中調用多個helper,內層helper的返回結果將作爲外層helper的參數傳遞
{{outer-helper (inner-helper 'abc') 'def'}}
控制空白
當在mustache語句的兩側使用~
符號,可以去除那一側的所有空白,直到遇到非空白字符或第一個handlebars表達式
示例:
上下文:
{
nav: [
{url: 'foo', test: true, title: 'bar'},
{url: 'bar'}
]
}
下列模板代碼:
{{#each nav}}
<a href="{{url}}">
{{#if test}}
{{title}}
{{^}}
Empty
{{/if}}
</a>
{{~/each}}
會輸出:
<a href="foo">
bar
</a>
<a href="bar">
Empty
</a>
使用~
去除空白:
{{#each nav ~}}
<a href="{{url}}">
{{~#if test}}
{{~title}}
{{~^~}}
Empty
{{~/if~}}
</a>
{{~/each}}
輸出:
<a href="foo">bar</a><a href="bar">Empty</a>
轉義
這邊說的轉義並不是指html轉義,而是輸出模板語句,如直接輸出{{title}}
而不是輸出title
Handlebars有兩種轉義方式:
- inline escapes
- raw blocks
inline escapes就是在mustache區塊之前加一個反斜槓\
\{{escaped}}
raw blocks是用四個大括號{{{{
將要轉義的區塊圍住來進行轉義
{{{{raw}}}}
{{escaped}}
{{{{/raw}}}}
然後還要寫一個helper:
handlebars.registerHelper('raw', function(options) {
return options.fn();
});
(這麼多花括號看得眼睛都花了…)