Handlebars.js 表达式

表达式是 Handlebars 模板的基本组成部分，你可以单独的以 {{mustache}} 的形式使用，传递给 Handlebars，或者当做 hash 的参数。

基础

最简单的 Handlebars 表达式是简单的标识

<h1>{{title}}</h1>

这个表达式的意思是：查到当前数据上下文的 title 属性。块 helpers 可以操作当前的数据上下文，但是不影响表达式的意思。

表达式也可以是用“点”分割的路径

<h1>{{article.title}}</h1>

这个表达式的意思是：查找当前数据上下文的 article 属性，然后在结果中查找 title 属性。handlebars 也支持已经弃用 / 分隔符，所以上面的表达式也可以写成

<h1>{{article/title}}</h1>

表达式可以包含任意的字符，除了：空格 ! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~

如果表达式不是有效的字符，可以使用 [ :

{{#each articles.[10].[#comments]}}
  <h1>{{subject}}</h1>
  <div>
    {{body}}
  </div>
{{/each}}

上例中，模板会循环 articles[10]['#comments'] 。

Handlebars 会编译 {{expression}} 返回的值，如果你不想结果被编译，可以使用 {{{

{{{foo}}}

Helpers

helper 调用是个简单的标识符，跟着零个或者多个参数（用空格分隔），每一个参数都是 Handlebars 表达式

扫描二维码关注公众号，回复： 3186589 查看本文章

{{{link story}}}

上例中，link 是 helper 的名称，story 是 helper 的参数。Handlebars 就像上文所说的处理参数

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

当 helper 返回 html 时，如果你不想被编码的话，需要返回 Handlebars 安全字符串。

也可以传递一个字符串当做 helper 的参数：

{{{link "See more..." story.url}}}

上例中，Handlebars 会传给 helper 两个参数：字符串 See more... 和当前上下文的 story.url

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

你也可以使用同样的 helper，通过动态字符串 story.text

{{{link story.text story.url}}}

Handlebars helper 可以接受个任意顺序的“键值对”作为最后一个参数（文档中被称为 hash）

{{{link "See more..." href=story.url class="story"}}}

hash 的 key 必须是简单的标识符，value 必须是表达式（就是字符串，路径，标识符）

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

  for(var prop in options.hash) {
    attrs.push(prop + '="' + options.hash[prop] + '"');
  }

  return new Handlebars.SafeString(
    "<a " + attrs.join(" ") + ">" + text + "</a>"
  );
});

Handlebars 提供额外的元数据，例如 hash，作为 helper 的最后一个参数。

Handlebars 也提供了一种机制，调用 helper with 部分模板。块级 helper 以后可以调用零次或者多次，with 任意的数据上下文。

更多资料：块级Helpers

子表达式

子表达式允许你调用多个 helper，内部表达式的结果可以当做参数传递给外部的表达式。子表达式有括号分割。

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

上例中，'abc' 会传递给 inner-helper，同时 inner-helper 的返回值会当成 outer-helper 的第一个参数。