因为handlebars模板的方便与简洁，比起jsp等又完全不依赖后台服务器，所以果断入手handlebars，但是因为强迫症的发作，找了半天如何将handlebars的模板文件放置在独立文件中，后来明白这是需要预编译的，但是不想浪费这三个小时的查找，还是将handlebars使用小结一下，至于预编译部分，还是之后系统试过之后再次推出吧！！！
handlebars简介
是js的一个语义模板库，通过view和data的分离来快速构建Web模板。采用“Logic-less template”（无逻辑模板）的思路，Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。“无逻辑”不是说你只能在模板中使用简单的占位符，而是意味着这些逻辑性的功能只能由某些智能标签来完成（例如，数组迭代，条件式渲染等）。
handlebars 特点
handlebars支持的浏览器及运行环境有：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插件，所以在相应的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一般来说都是为了解决从后台拿数据，并实现后台数据前端渲染的问题。在未与后台对接时，可以自己用js模拟json数据进行渲染。
之前有用过jsp进行渲染，每一次检查效果什么的都需要开启服务器，我项目一般用的是IDEA，一开启，整个电脑就出现各种卡顿、卡。。。
所以可以用sublime直接查看渲染的handlebars渲染的效果时，我内心是极其愉悦的。
虽然如果用gulp等对其进行预编译会改变这种情况，心里也是愉悦的，毕竟不是后台程序员，jsp与后台的交互一些东西时我的内心也是不愿的。
模拟的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数据传入handlebars，并渲染需要的html部分，根据需要的div内容实现渲染效果==这里是我项目的，如果需要使用可以进行相应改变。
对应的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实现html的替换和渲染
var myTemplate = Handlebars.compile($("#table-template").html());
$('#dataList').html(myTemplate(data));
4.逻辑图如下
注：文章乃自己实践总结，若有论述错误希望指正，下篇将介绍handlebars的一些使用函数的方法
