對自己使用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 }}