对自己使用handlebars做一个小总结，以后忘记了，好有地方看一下，不会用的小伙伴也可以借鉴一下，写的不好。
使用
Handlebars的安装是比较简单和方便的;handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js
<script src="jquery.min.js"></script> <script type="text/javascript" src=".js/handlebars.js"></script>
基本
html：
<-- 模板 -->
<script type="text/x-handlebars-template" id="tpl">
{{#each}}
...
{{/each}}
</script>
js:
//获取到模板
var tpl = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(tpl);
//模拟数据（也可以是获取的json数据）
var context = {};
//匹配数据
var html = template(context);
//输入模板
$('body').html(html);
注 ： 这是handlebars最常用的一中创建使用模式。
下面写一点handlebars的一些常用的方法，几乎是只要你用到handlebars就会用到的方法；我是100%用到了；
注：下面这些都是在模板中的使用的只有，目前只有helper是在js中定义在模板中使用。
概念和常用方法
1.block
我看每个介绍handlebars的都介绍了这个最基本最基本的东西，我也说不好，只能简单说一下了。
这个就是将模板分成块以#开头以/结束
{{#...}}{{/...}}
//例如 ：
{{#each}}{{/each}}
{{#if}}{{else}}{{/if}}
2.表达式
这也是一个非常简单的一个概念，越简单的越难说，但是好理解希望你们能理解，原谅文化水平不高的我
我们想要展示数据就要用到表达式，在handlebars中的表达式就是两层大括号，括号里写上json数据中的键展现在页面上的就是对应的值 {{...}}
如果我们不想转化handlebars的数据，就是直接展示json的键我们就需要三层大括号 {{{}}}
3.判断 if and unless
handlebars中的判断很弱，弱到这能判断true和false（包括布尔值转化的例如 "",undefined,NaN。不支持 == != || && !）。handlebars提供了一个自定义helper可以自己加强if，这个后面会说到。
1.if判断（一般我使用这个）
模板：
{{#if true}} <div>为true的时候显示<div> {{else}} <div>为false的时候显示<div> {{/if}}
2.unless判断(与if是相反的)
模板：
{{#unless false}} <div>为false的时候显示<div> {{else}} <div>为true的时候显示<div> {{/unless}}
4.部分 {{#with}}{{/with}}
这种情况是返回的json数据有多个对象嵌套的问题，很好用的一个方法，
也可以直接通过对象点属性的方法找下去，既然handlebars提供了。我就说一下，用不用，看情况
json数据：
{
title : "标题1",
author: {
firstName:"王大",
lastName:"王二"
}
}
模板：
<div> <h1>{{title}}</h1> {{#with author}} <p>{{firstName}}</p> <p>{{lastName}}</p> {{/with}} </div>
5.遍历 {{#each}}{{/each}}
数据返回我们一个数组是很常见的问题，handlebars有专门处理数组的方法
json数据：
{name:["html","css","javaScript"]}
模板：
<ul> {{#each name}}
<li>{{@index}} 索引<li> <li>{{this}}</li> {{/each}} </ul>
注：this就是name数组中的每一个
6.注释
单行：
{{! 注释的内容 }}
多行：
{{!-- 注释的代码段--}}
7.自定义 helper
定义要在js文件中定义，使用要在模板中使用
handlebars使用Handlebars.registerHelper()方法来注册helper，
一般分为两类，一类是用来格式化数据，另一类是用来加强if
这个网址说的很详细：http://www.tuicool.com/articles/aiaqMn
时间格式化：
//时间戳处理 Handlebars.registerHelper('format', function (date,options) {
let str = new Date(date).toLocaleString(); let i = str.indexOf(' '); let str1 = str.substr(i + 1,2); let str2 = str.substr(i + 3,2); if (isNaN(str2)) { if (str1 == '上午') { str = str.replace(str.substr(i + 1,3),'0' + str.substr(i + 3,1)); }else { str = str.replace(str.substr(i + 1,3),Number(str.substr(i + 3,1)) + 12); } }else{ if (str1 == '上午') { str = str.replace(str.substr(i + 1,2),''); }else { if(Number(str2) == 12){ str = str.replace(str.substr(i + 1,4),'00'); }else { str = str.replace(str.substr(i + 1,4),Number(str.substr(i + 3,2)) + 12); } } } return str; });
if的简单加强：
//if 处理 Handlebars.registerHelper('ifCond', function(v1, v2, options) { if(v1 == v2) {
return options.fn(this); }
//options.inverse()这个方法就是取反的意思，相当于if的else return options.inverse(this); });
返回一个字符串：
Handlebars.registerHelper('valValType', function(){
//this.type 是返回的数据
var type = Handlebars.escapeExpression(this.type);
var html = `<div>1234</div>`;
if(type){
var newHtml =`<div>12345</div>`;
}else {
var newHtml = html;
}
return new Handlebars.SafeString(newHtml)
})
//用法在模板里 {{ valValType }}