Handlebars學習之——表達式

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();
});

(這麼多花括號看得眼睛都花了…)

參考

• Handlebars.js: Minimal Templating on Steroids