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>hellospan>

{{{link 'hello'}}}  //hello

Helpers

handlebars helper相当于一个函数，先在js代码中注册一个helper：

Handlebars.registerHelper('link', function(str){
  return ''+ str +'';
});

然后在模板文件中调用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">bara><a href="bar">Emptya>

转义

这边说的转义并不是指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