让我明白又糊涂的handlebars（一）

---

因为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引入，如下：

所以，就这样，我们可以开始我们的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部分

handlebars渲染部分

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

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

4.逻辑图如下

handlebars使用过程.png

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