Handlebars学习（7）- 内置helpers

Handlebars提供一系列内置helpers，像if条件从句和each迭代器。

 

7.1 if helper

可以使用if helper有条件的呈现一个代码块。如果参数返回false、undefined、null、""或者[]（一个返回false的值），Handlebars将不会呈现代码块。

  <div class="entry">
    {{#if author}}
      <h1>{{firstName}} {{lastName}}</h1>
    {{/if}}
  </div>

当使用一个空（{}）上下文，author等于undefined，结果输出：

  <div class="entry">
  </div>

当使用一个块表达式，如果表达式返回false，你可以指定一个模板片段。这个片段通过{{else}}标记，成为else片段。

  <div class="entry">
    {{#if author}}
      <h1>{{firstName}} {{lastName}}</h1>
    {{else}}
      <h1>Unknown Author</h1>
    {{/if}}
  </div>

 

7.2 unless helper

你可以使用unless helper作为与if helper互逆的操作。Unless语句会在表达式返回false时输出代码块。

  <div class="entry">
    {{#unless license}}
    <h3 class="warning">WARNING: This entry does not have a license!</h3>
    {{/unless}}
  </div>

如果在当前的上下文中找不到license值，Handlebars将会输出一个提醒，否知，什么都不会被输出。

 

7.3 each helper

可以通过内置each helper迭代一个列表。在代码块内部，可以使用this引用当前正迭代的元素。

  <ul class="people_list">
    {{#each people}}
      <li>{{this}}</li>
    {{/each}}
  </ul>

当使用上下文：

  {
    people: [
      "Yehuda Katz",
      "Alan Johnson",
      "Charles Jolley"
    ]
  }

将会输出：

  <ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
  </ul>

你可以使用this表达式在任何上下文中以引用当前的上下文元素。

 

{{else}}片段可以有选择的提供，仅当列表为空的时候，它才会被显示。

  {{#each paragraphs}}
    <p>{{this}}</p>
  {{else}}
    <p class="empty">No content</p>
  {{/each}}

当通过each遍历元素项时，你可以使用{{@index}}引用当前正遍历元素的索引。

  {{#each array}}
    {{@index}}: {{this}}
  {{/each}}

此外，为了遍历对象，{{@key}}可用于引用当前的键名：

  {{#each object}}
    {{@key}}: {{this}}
  {{/each}}

遍历数组时，第一和最后一步采用@first 和 @last变量标记。当遍历一个对象时，只能使用@first。

 

7.4 with helper

正常情况下，通过将上下文载入编译的方法运行Handlebars模板。

  var source  = "<p>{{lastName}}, {{firstName}}</p>";
  var template = Handlebars.compile(source);
  template({firstName: "Alan", lastName: "Johnson"});

结果输出：

  <p>Johnson, Alan</p>

你可以使用内置with helper改变模板中某个部分的上下文。

  <div class="entry">
    <h1>{{title}}</h1>

    {{#with author}}
    <h2>By {{firstName}} {{lastName}}</h2>
    {{/with}}
  </div>

使用上下文：

  {
    title: "My first post!",
    author: {
      firstName: "Charles",
      lastName: "Jolley"
    }
  }

将会输出：

  <div class="entry">
    <h1>My first post!</h1>

    <h2>By Charles Jolley</h2>
  </div>

可以有选择的提供{{else}}片段，{{else}}片段仅会在传递的值是空是显示。

  {{#with author}}
    <p>{{name}}</p>
  {{else}}
    <p class="empty">No content</p>
  {{/with}}

 

7.5 lookup helper

使用Handlebars变量时，lookup helper允许使用动态参数。这是对解决数字索引值十分有用。

  {{#each bar}}
    {{lookup ../foo @index}}
  {{/each}}

 

7.6 log helper

Log helper允许运行模板时记录上下文状态。

 {{log "Look at me!"}}

通过Handlebars.logger.log可以重写执行自定义日志。

 

7.7 blockHelperMissing helper

在环境的helpers hash中，当一个helper不能被直接解析时，将会调用这个helper。

  {{#foo}}{{/foo}}

在当前的上下文，将会调用具有foo解析值的helper，同时，options.name域设置为"foo"。For instances，这里没有名为foo的已注册helper。

为了改变块运行的行为，这可能被用户重写。例如：

  Handlebars.registerHelper('blockHelperMissing', function(context, options) {
    throw new Handlebars.Exception('Only if or each is allowed');
  });

可以阻止mustache-style块的使用，取而代之，使用更加高效的if和each helpers。

 

7.8 helperMissing helper

在环境helpers或者当前的上下文中，当一个potential helper表达式不能被发现时使用这个内置helper。在以上的两种情况下，helperMissing helper会在blockHelperMissing helper之前运行。

  {{foo}}
  {{foo bar}}
  {{#foo}}{{/foo}}

将会调用这个helper，传递任何可能的参数，否则，传递给同名的helper。当使用knownHelpersOnly模型时，这个helper将不会被调用。

这可能被应用重写。为促使域的存在，可以使用下面的代码：

  Handlebars.registerHelper('helperMissing', function(/* [args, ] options */) {
    var options = arguments[arguments.length - 1];
    throw new Handlebars.Exception('Unknown field: ' + options.name);
  });