Handlebars模板引擎之高阶

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>