因为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}} &nbsp {{cd-half-day}} </p>
        </div>
    </div>
    {{/each}}
</script>

3.再使用js实现html的替换和渲染

var myTemplate = Handlebars.compile($("#table-template").html());
$('#dataList').html(myTemplate(data));

4.逻辑图如下

handlebars使用过程.png

注：文章乃自己实践总结，若有论述错误希望指正，下篇将介绍handlebars的一些使用函数的方法