Helpers

---

其实在Handlebars模板引擎之进阶我想说if else的功能的，可是由于这个功能在我的开发中我觉的鸡肋没啥用，就直接不用了。

因为if else只能进行简单判断，如果条件参数返回 false, undefined, null, "" 或 []（非真的值）时，Handlebars 将不渲染。

类似这样

{{#each this}}

  {{#if this.show}}

  {{/if}}

{{/each}}

并不能进行二元的运算，类似这样

{{#each this}}

  {{#if this.show == 'showtime' }}

  {{/if}}

{{/each}}

所以用的不多，如果有类似上面的二元的话，需要借助Helpers来操作。

具体来看下用Handlebars是什么东西。

var myTemplate = Handlebars.compile($("#table-template").html());

Handlebars.registerHelper("addOne", function(index, options) {

	return parseInt(index, 10) + 1;

});

$('#table tbody').html(myTemplate(data));

注册Helper后，使用

<td>{{ addOne @index }}</td>

这里我就以上文中，表格序号为引。

表格需要以0开头应该是很怪，所以我们需要以1开头。如果只是简单的js的话，直接index+1就完事了。但是我们这是模板引擎，我们需要按照她的规则来。

这里我们就通过Handlebars.registerHelper()注册了一个Helper(上帝之手)。

然后传递一个helper的名称，一个回调函数，函数中的参数，就是我们注入进去的@index索引值。

效果:

更进一部的官方例子:

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

模板

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>