因?yàn)閔andlebars模板的方便與簡潔，比起jsp等又完全不依賴后臺(tái)服務(wù)器，所以果斷入手handlebars，但是因?yàn)閺?qiáng)迫癥的發(fā)作，找了半天如何將handlebars的模板文件放置在獨(dú)立文件中，后來明白這是需要預(yù)編譯的，但是不想浪費(fèi)這三個(gè)小時(shí)的查找，還是將handlebars使用小結(jié)一下，至于預(yù)編譯部分，還是之后系統(tǒng)試過之后再次推出吧?。?！
handlebars簡介
是js的一個(gè)語義模板庫，通過view和data的分離來快速構(gòu)建Web模板。采用“Logic-less template”（無邏輯模板）的思路，Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板?！盁o邏輯”不是說你只能在模板中使用簡單的占位符，而是意味著這些邏輯性的功能只能由某些智能標(biāo)簽來完成（例如，數(shù)組迭代，條件式渲染等）。
handlebars 特點(diǎn)
handlebars支持的瀏覽器及運(yùn)行環(huán)境有：IE6+ Chrome Firefox Safari5+ Operall11+以及node.js
handlebars是ember.js /nodejs web框架Clouda/ Meteor的默認(rèn)模板引擎
handlebars使用
- 安裝
其實(shí)handlebars也相當(dāng)于一個(gè)js庫，如同jquery一樣，下載、安裝，這里我們可以從http://handlebarsjs.com中下載handlebars.js庫 - 引入
因?yàn)閔andlebars.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初體驗(yàn)啦
- 使用基本邏輯
1.使用handlebars一般來說都是為了解決從后臺(tái)拿數(shù)據(jù)，并實(shí)現(xiàn)后臺(tái)數(shù)據(jù)前端渲染的問題。在未與后臺(tái)對(duì)接時(shí)，可以自己用js模擬json數(shù)據(jù)進(jìn)行渲染。
之前有用過jsp進(jìn)行渲染，每一次檢查效果什么的都需要開啟服務(wù)器，我項(xiàng)目一般用的是IDEA，一開啟，整個(gè)電腦就出現(xiàn)各種卡頓、卡。。。
所以可以用sublime直接查看渲染的handlebars渲染的效果時(shí)，我內(nèi)心是極其愉悅的。
雖然如果用gulp等對(duì)其進(jìn)行預(yù)編譯會(huì)改變這種情況，心里也是愉悅的，畢竟不是后臺(tái)程序員，jsp與后臺(tái)的交互一些東西時(shí)我的內(nèi)心也是不愿的。
模擬的json對(duì)象
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)容實(shí)現(xiàn)渲染效果==這里是我項(xiàng)目的，如果需要使用可以進(jìn)行相應(yīng)改變。
對(duì)應(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實(shí)現(xiàn)html的替換和渲染
var myTemplate = Handlebars.compile($("#table-template").html());
$('#dataList').html(myTemplate(data));
4.邏輯圖如下
注：文章乃自己實(shí)踐總結(jié)，若有論述錯(cuò)誤希望指正，下篇將介紹handlebars的一些使用函數(shù)的方法
