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>

posted on 2017-03-09 22:09 qize 阅读(...) 评论(...) 编辑 收藏

导航

公告