因為handlebars模板的方便與簡潔箕别，比起jsp等又完全不依賴后臺服務(wù)器俄周，所以果斷入手handlebars亡电，但是因為強迫癥的發(fā)作沪铭，找了半天如何將handlebars的模板文件放置在獨立文件中壮池，后來明白這是需要預(yù)編譯的，但是不想浪費這三個小時的查找杀怠，還是將handlebars使用小結(jié)一下椰憋，至于預(yù)編譯部分，還是之后系統(tǒng)試過之后再次推出吧Ｅ馔恕３纫馈！
handlebars簡介
是js的一個語義模板庫，通過view和data的分離來快速構(gòu)建Web模板票编。采用“Logic-less template”（無邏輯模板）的思路褪储，Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板慧域±鹬瘢“無邏輯”不是說你只能在模板中使用簡單的占位符，而是意味著這些邏輯性的功能只能由某些智能標簽來完成（例如昔榴，數(shù)組迭代辛藻，條件式渲染等）。
handlebars 特點
handlebars支持的瀏覽器及運行環(huán)境有：IE6+ Chrome Firefox Safari5+ Operall11+以及node.js
handlebars是ember.js /nodejs web框架Clouda/ Meteor的默認模板引擎
handlebars使用
- 安裝
其實handlebars也相當于一個js庫互订，如同jquery一樣吱肌，下載、安裝仰禽，這里我們可以從http://handlebarsjs.com中下載handlebars.js庫 - 引入
因為handlebars.js是jquery插件氮墨，所以在相應(yīng)的html中需要分別將jquery與handlebars引入，如下：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/handlebars/handlebars-v3.0.1.js"></script>
所以吐葵，就這樣规揪，我們可以開始我們的handlebars初體驗啦
- 使用基本邏輯
1.使用handlebars一般來說都是為了解決從后臺拿數(shù)據(jù)，并實現(xiàn)后臺數(shù)據(jù)前端渲染的問題。在未與后臺對接時，可以自己用js模擬json數(shù)據(jù)進行渲染阔逼。
之前有用過jsp進行渲染，每一次檢查效果什么的都需要開啟服務(wù)器专普，我項目一般用的是IDEA，一開啟，整個電腦就出現(xiàn)各種卡頓、卡栗菜。。抠艾。
所以可以用sublime直接查看渲染的handlebars渲染的效果時苛萎，我內(nèi)心是極其愉悅的。
雖然如果用gulp等對其進行預(yù)編譯會改變這種情況检号，心里也是愉悅的，畢竟不是后臺程序員蛙酪，jsp與后臺的交互一些東西時我的內(nèi)心也是不愿的齐苛。
模擬的json對象
var data = [
{"cd-timeline-content":"content_right",
"cd-detail-date":"date-right",
"cd-title":"熱氣球",
"content_a_href":"#",
"content_img_src":"../../src/images/balloon/1.jpg",
"cd-date":"2015-01-06",
"cd-date-clock":"8:00 ",
"cd-half-day":"am"}
];
2.js的json數(shù)據(jù)傳入handlebars，并渲染需要的html部分桂塞，根據(jù)需要的div內(nèi)容實現(xiàn)渲染效果==這里是我項目的凹蜂，如果需要使用可以進行相應(yīng)改變。
對應(yīng)的html部分
<div id="dataList"></div>
handlebars渲染部分
<script id="table-template" type="text/x-handlebars-template" >
{{#each this}}
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="../../src/images/MyTracks/3.png" alt="Picture">
</div>
<div class="cd-timeline-content {{cd-timeline-content}} " >
<h2>{{cd-title }}</h2>
<a href="{{content_a_href}}"><img src="{{content_img_src}}" ></a>
</div>
<div class="cd-detail-date {{cd-detail-date}}">
<p class="cd-date">{{cd-date}}</p>
<p class="cd-date-clock">{{cd-date-clock}}   {{cd-half-day}} </p>
</div>
</div>
{{/each}}
</script>
3.再使用js實現(xiàn)html的替換和渲染
var myTemplate = Handlebars.compile($("#table-template").html());
$('#dataList').html(myTemplate(data));
4.邏輯圖如下
注：文章乃自己實踐總結(jié)，若有論述錯誤希望指正玛痊，下篇將介紹handlebars的一些使用函數(shù)的方法
