`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; ' ` =

辅助函数

可以使用辅助函数实现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}}}}

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