Handlebars的each和with block helpe

前言

Handlebars是JavaScript的一个语义模板库，通过对view和data的分离来快速构建web模板。基本用法和安装请看《Handlebars.js 模板引擎》，这里想介绍的是Handlebars里的两个实用helper，each和with。

each block helper

你可以使用handlebars内置的each helper来进行遍历操作，使用this来引用遍历的内容，基本用法如下：

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

对应传入helper的数据是：

{
  people: [ "张三", "李四","冯五" ]
}

对应渲染出来的结果是：

<ul class="people_list">
  <li>张三</li>
  <li>李四</li>
  <li>冯五</li>
</ul>

其实在block helper里你能使用this来代表任何的引用。

项目中遇到空值列表怎么办？可以使用{{else}}来渲染空值内容，比如：

{{#each people}}
  <p>{{this}}</p>
{{else}}
  <p class="empty">暂无内容</p>
{{/each}}

在使用each遍历时，你能使用变量{{@index}}来代表元素的下标值，在对象数组里，还能使用{{@key}}来表示下标，比如：

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

// 对象数组
{{#each object}}
  {{@key}}: {{this}}
{{/each}}

还能使用{{@../index}}来表示父级的下标，同时你还能使用@first，@last来表示数组里的第一个和最后一个，比如：

{{#each .}}
  <p style="{{#if @first}}background-color: red;{{/if}}">{{this}}</p>
{{/each}}

在Handlebars3.0后，each能使用block parameters，比如：

{{#each users as |user index|}}
  Num: {{index}} Name: {{user.name}}
{{/each}}

其中user是block里的context，等同于this，而index则是对应context的下标值，名字可以随便起，第二个变量可以省略。

with block helper

一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用{{#with}}的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。 这个方法在操作复杂的template时候非常有用，比如：

<div class="entry">
  <h1>{{title}}</h1>
  {{#with author}}
  <h2>By {{firstName}} {{lastName}}</h2>
  {{/with}}
</div>

数据为：

{
  title: "My first post!",
  author: {
    firstName: "张",
    lastName: "三"
  }
}

小技巧

有时候我们想把一个对象写入data api里，比如{id: 1, name: "julien", birday: "2018-12-09"}，但handlebars渲染出来的结果却是data-user="[Object Object]"，这时候我们可以自顶一个helper，然后使用JSON.stringify()来转换，比如：

Handlebars.registerHelper('json', function (user) {
    return JSON.stringify(user);
})

// 注意这里的data-user的值要使用单引号
<div id="user-detail" data-user='{{&json userData}}'></div>

使用时

var data = $('#user-detail').data('user');
console.log(data.name);

运行结果
julien
但个人不建议这样做，特别是服务端回传的数据，这样会把数据全部暴露在html上，所以应该看情况选择合适的方法。

以上是个人的一些使用总结，欢迎指教！