Handlebars学习（6）- helpers

在Handlebars模板中，helpers可以使用任何上下文。可以使用Handlebars.registerHelper方法注册一个helper。

  <div class="post">
    <h1>By {{fullName author}}</h1>
    <div class="body">{{body}}</div>

    <h1>Comments</h1>

    {{#each comments}}
    <h2>By {{fullName author}}</h2>
    <div class="body">{{body}}</div>
    {{/each}}
  </div>

当使用下面的context和helpers时：

  var context = {
    author: {firstName: "Alan", lastName: "Johnson"},
    body: "I Love Handlebars",
    comments: [{
      author: {firstName: "Yehuda", lastName: "Katz"},
      body: "Me too!"
    }]
  };

  Handlebars.registerHelper('fullName', function(person) {
    return person.firstName + " " + person.lastName;
  });

将输出：

  <div class="post">
    <h1>By Alan Johnson</h1>
    <div class="body">I Love Handlebars</div>

    <h1>Comments</h1>

    <h2>By Yehuda Katz</h2>
    <div class="body">Me Too!</div>
  </div>

Helpers接受当前的context作为函数中this上下文。

  <ul>
    {{#each items}}
    <li>{{agree_button}}</li>
    {{/each}}
  </ul>

当使用这个context和helpers时：

  var context = {
    items: [
      {name: "Handlebars", emotion: "love"},
      {name: "Mustache", emotion: "enjoy"},
      {name: "Ember", emotion: "want to learn"}
    ]
  };

  Handlebars.registerHelper('agree_button', function() {
    var emotion = Handlebars.escapeExpression(this.emotion),
        name = Handlebars.escapeExpression(this.name);

    return new Handlebars.SafeString(
      "<button>I agree. I " + emotion + " " + name + "</button>"
    );
  });

将输出：

  <ul>
    <li><button>I agree. I love Handlebars</button></li>
    <li><button>I agree. I enjoy Mustache</button></li>
    <li><button>I agree. I want to learn Ember</button></li>
  </ul>

如果helper返回你不想转义的HTML，确保返回一个新的Handlebars.SafeString。