`handlebars` 表达式详解

Handlebars 表达式是 Handlebars模板的基本单元。 您可以在{{ mustache }}中单独使用它们，将它们传递给Handlebars 辅助程序，或者将它们用作散列参数中的值。

基本用法

Handlebars 表达式是由双花括号{}括起来的一些内容。 在下面的模板中，firstname 是一个变量，它由双花括号括起来，称为表达式。

<p>{{firstname}} {{lastname}}</p

如果将下面的输入对象应用于模板

{
	firstname:"Yehuda",
	lastname:"Katz"
}

编译表达式后产生如下输出：

<p>Yehuda Katz</p>

路径表达式

Handlebars 表达式也可以是点分割的路径

{{person.firstname}}{{person.lastname}}

该表达式在输入的数据对象中查找person 属性，然后在person对象中查找firstname和lastname 属性。

将下面的的对象传递给模板：

{
	person:{
		firstname:"Yehuda",
		lastname:"Katz"
	}
}

将会生成下面的结果：

Yehuda Katz

Handlebars还支持已弃用的/语法，因此您可以将上面的模板编写为：

{{person/firstname}} {{person/lastname}}

改变环境

一些像#with和#each 这样的辅助程序允许你深入到嵌套对象中。当你将../放入你的路径，Handlebars将会变回到父级上下文中。

{{#each people}}
	{{../prefix}} {{firstname}}
{{/each}}

即使名称是在注释的上下文中打印的，它仍然可以返回到住上下文（根对象）来检索前缀。

文字片段

标识符可以使任何Unicode字符，但下列标识符除外：

空白符、! " # % & ( ) * + , . / ; < = > @ [ \ ] ^ `` {|}~`

此外，单词true ,false , null 和 undefined 只能在路径表达式的第一部分中使用。

若要引用不是有效标识符的属性，可以使用段-字面表示法，[ . 你不可以在一个路径-字面表示法中包含关闭的]

但允许使用所有其他字符。

javascript风格的字符串， " 和 ' ，也可使用[] 对代替。

{{!-- wrong: {{array.0.item}} --}}
correct: array.[0].item: {{array.[0].item}}

{{!-- wrong: {{array.[0].item-class}} --}}
correct: array.[0].[item-class]: {{array.[0].[item-class]}}

{{!-- wrong: {{./true}}--}}
correct: ./[true]: {{./[true]}}

HTML转义

在Handlebars中，{{ expression }} 的返回值是 HTML 转义的。 比如，如果表达式包含& ， 那么返回的被html转义后输出的值为& 如果你不希望Handlebars 转义一个值，可以使用三括号符 {{{}}} :

raw: {{{ specialChars}}}
html-escaped : {{specialChars}}

将特殊字符传递给模板

{ specialChars : "& < > \" ' ` = " }

由三括号包含的表达式生成原始的输出，否则生成下面html转义输出：

raw: & < > " ' ` =
html-escaped: &amp; &lt; &gt; &quot; &#x27; &#x60; &#x3D;

辅助函数

可以使用辅助函数实现Handlebars 语言本身以外的功能。

例如，可以通过 Handlebars.registerHelper 在运行时注册辅助函数，以便将字符串的所有字符都大写

Handlebars.registerHelper('loud', function(aString){
	return aString.toUpperCase()
})

一个Handlebars辅助程序调用时一个简单的标识符，后面跟着零个或多个参数（用空格分隔）。每个参数都是一个Handlebars 表达式，其计算方式与上面的 “基本用法” 中描述的完全相同：

{{firstname}} {{loud lastname}}

在这种情况下，loud是辅助程序的名称， lastname 是辅助程序的参数。 模板将大写输入的lastname属性：

{
	firstname:"Yehuda",
	lastname:"Katz"
}

将会输出：

Yehuda KATZ

防止辅助程序返回值的 html转义

当辅助程序返回Handlebars.Safestring 实例时，返回值是不会被转义的，即使是使用{{}} 而不是{{{}}}

来调用。 你必须注意使用Handlebars.escapeExpression 正确地转义所有参数。

Handlebars.registerHelper("bold",function(text){
	var result="<b>" + Handlebars.escapeExpression(text) + "</b>";
	return new Handlebars.SafeString(result)
});

多参数辅助程序

让我们看看另一个带有两个参数的辅助程序示例

{{link "See Website" url}}

在这种情况下，Handlebars 将传递给link 辅助程序两个参数：字符串See Website 和people.url的值，这个值是从贡献提供的数据输入的people 对象中而来。

{ url: "https://yehudakatz.com/"}

辅助函数link 用于生成脚本中描述的超链接。

Handlebars.registerHelper("link", function(text, url) {
      var url = Handlebars.escapeExpression(url),
          text = Handlebars.escapeExpression(text)
          
     return new Handlebars.SafeString("<a href='" + url + "'>" + text +"</a>");
});

我们将使用输入参数获得输出：

<a href='https://yehudakatz.com/'>See Website</a>

在上面的例子中，你可以使用基于people.text 值的动态文本的同样的辅助函数：

{{link people.text people.url}}

{
	people:{
		firstname:"Yehuda",
		lastname:"Katz",
		url:"https://yehudakatz.com/",
		text:"See Website"
	}
}

文字参数

Helper 调用还可以将文本值作为参数数组或散列参数传递给它们。 支持的文本值包括数字、字符串、真、假、空和未定义:

{{progress "Search" 10 false}}
{{progress "Upload" 90 true}}
{{progress "Finish" 100 false}}

带散列参数的辅助程序

Handlebars 提供可选的元数据，比如散列参数，来传递给辅助程序作为最终的参数。

{{link "See Website" href-person.url class="person"}}

在该模板中，最后一个参数href-person.url class="person" 就是一个传递给 辅助程序的散列参数。

散列参数中的键必须是简单的标识符，并且这些值是Handlebars 表达式。这意味着值可以是简单的标识符、路径或字符串。

如果将下面的输入传递给模板，则可以从 person 对象获得person.url的值。

{
	person:{
		firstname:"Yehuda",
		lastname:"Katz",
		url:"https://yehudakatz.com/"
	}
}

正如下面的辅助程序脚本中所描述的，可以从辅助程序中进一步处理的最后一个参数选项中获得散列参数。

Handlebars.registerHelper("link", function(text, options) {
    var attributes = [];

    Object.keys(options.hash).forEach(key => {
        var escapedKey = Handlebars.escapeExpression(key);
        var escapedValue = Handlebars.escapeExpression(options.hash[key]);
        attributes.push(escapedKey + '="' + escapedValue + '"');
    })
    var escapedText = Handlebars.escapeExpression(text);
    
    var escapedOutput ="<a " + attributes.join(" ") + ">" + escapedText + "</a>";
    return new Handlebars.SafeString(escapedOutput);
});

上述辅助程序的输出如下所示

<a class="person" href="https://yehudakatz.com/">See Website</a>

Handlebars 还提供了一种用模板块调用辅助程序的机制。然后，块辅助程序可以在它选择的任何上下文中零次或多次调用该块。

消除辅助程序调用和属性查找的歧义

如果辅助程序使用与输入对象的属性相同的名称注册，则辅助程序具有优先于输入属性的权限。如果要转而解析输入属性，则可以在其名称前加上./ 或者 this （或者this/）作为前缀。

helper:{{name}}
data:{{./name}} or {{this/name}} or {{this.name}}

{name:"Yehuda"}

Handlebars.registerHelper(
	'name',function(){
		return "Nils"
	}
)

Subexpressions 子表达式

Handlebars 提供了对子表达式的支持，它允许您在单个 mustache 中调用多个 辅助程序，并将内部辅助程序调用的结果作为参数传递给外部辅助程序。子表达式由括号分割。

{{outer-helper (inner-helper 'abc') 'def'}}

在这种情况下，inner-helper 将通过字符串参数abc 被调用，而且不管 inner-helper 函数返回什么，它都将作为第一个参数传递给outer-helper （而 def 将作为第二个参数传递给 outer-helper）。

空白控制

通过在大括号中添加 ~ 字符，任何 mustache 语句的两边都可以省略模板空格。当应用时，该侧的所有空格将被删除，直到第一个Handlebars表达式或该侧的非空格字符。

{{#each nav ~}}
	<a href="{{url}}">
		{{~#if test}}
			{{~title}}
         {{~^~}}
         	Empty
         {{~/if~}}
      </a>
    {{~/each}}  

在这种情况下：

{
	nav:[{url:"foo", test:true, title:"bar"},{url:"bar"}]
}

结果是输出没有换行和格式化空格：

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

转义Handlebars表达式

Handlebars 内容可以通过以下两种方式之一进行转义：内联转义或 原始块辅助程序。内联转义是通过在 mustache 块前加上\ 来创建的。 使用{{{{}}}} 可以创建原始块。

\{{escaped}}
{{{{raw}}}}
  {{escaped}}
{{{{/raw}}}}

原始块的操作方式与其它块辅助程序相同，子内容的区别被视为文字字符串。