昨天抽空看了一下关于Handlebars的 基础使用， 从开始写asp.net 用视图引擎，到写web 的时候 ，都是 用AJAx 来接受并分析数据，然后用 拼接的方式，或者追加的方式来实现在 页面中的 数据展示，今天 用 Handlebars 来实现同样的事情。（关于这些，还是不太清楚，有空还是需要多看看 关于前端的知识。。）
引用头文件
先说基础的使用 跟用ＪＳ插件一样，都是要用到引用文件：
<script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/handlebars.min.js"></script>
当然 Handlebars 的使用还是 基于jQ的语法来使用的。 也很 明了 只需要引用两个 文件。
使用起来 也是很容易理解 我自己的理解 Handlebars 是分为了两个 一个是 模板块，一个就是 js 方法+数据源块。
模板块
现实 个 这个 模板块一个 ID 用来以后JQ 拿到咱们所写得模板。 看代码：
<script id="table-template" type="text/x-handlebars-template"> {{#each student}} <tr> <td>{{@index}}</td> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> <td>{{{homePage}}}</td> </tr> {{/each}} </script>
先说 {{}} 就是模板 格式 相当于 html里面的<> 一样 同样 有{{/}} , 然后就是 #each 循环的意思 ，Razor视图引擎的话 那就完全没有难度了
其实就跟那个差不多{{}}中写的代码，其余部分 用来写
标签 #each student 循环 获取其中的 key的值放在<tr>中
在td中 包含的就是 JSON数据的 KEY ，{{@index}}这个是 Handlebars js中的一个变量 用来显示 序号
这时候 我就有个疑问当 是JSON 的是话最外层 是没有Key 的 那如何用来指这个JSON串，根据经验 this 用于这种情况， this就指当前
填充模板块
填充模板 ， 很简单易懂 就是根据id拿到对应的 模板块，然后 获取指定的父节点 填充html
<script type="text/javascript"> $().ready(function () { var data = { "student": [ { "name": "张三", "sex": "0", "age": 18, "homePage": "<a href='javascript:void(0);'>张三的个人主页</a>" }, { "name": "李四", "sex": "0", "age": 20, "homePage": "<a href='javascript:void(0);'>李四的个人主页</a>" }, { "name": "王五", "sex": "1", "age": 30, "homePage": "<a href='javascript:void(0);'>王五的个人主页</a>" } ]}; //获取 对应的模板块 var myTemplate = Handlebars.compile($("#table-template").html());
//在父节点填充 模板块并 给模板块赋值 $("#tableList").html(myTemplate(data)); }); </script>
上面这段代码 除了 模拟的data 数据之外 就剩下两句话 ，在其中 注释解释过， 然后 运行 就可以看到 自动填充的数据。
填充模板块内容很少 ，需要处理的还是 模板块的内容，根据 数据的结构来 用#each 循环获取其中的 值。
当然模板块 不是只有#each ，还有 if 语句 ，不过 本人并不推荐使用，因为很难用， 可以用 另外一个东西代替：
Handlebars.registerHelper("compare", function (name, options) {
if (name == "李四") {
return options.fn(this
);//就代表 执行结果为True
}
return options.inverse(this);//代表执行结果为False
});
可以在 JQ 中 用 他的Helper 方法， 来声明 一个 函数， 用来实现 判断，
可以看出有两个参数 第一个参数是需要 传入值，第二个参数 代表 该方法为块方法 就是{{#compare 参数1}}{{/compare}} 或许会有些不清晰看：
{{#each student}} {{#compare name}} <tr> <td>{{@index}}</td> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> <td>{{{homePage}}}</td> </tr> {{else}} <tr> 查无此人 </tr> {{/compare}} {{/each}}
上面就是 compare 套到模板中的方式。
第二个参数 代表 该方法为块方法 就是{{#compare 参数1}}{{/compare}} ，
如果去掉Options 这个参数就是 一个行内方法， {{方法名 name}} 直接返回需要的值，就能填充到该位置
以上就是 我对 Handlebars 的 基础使用 做的总结，如果有疑问，使用方法不明确 欢迎讨论哦！
参考网站：http://www.cnblogs.com/iyangyuan/p/3471227.html 很清晰的说明了使用方法 ，对应相对的使用情景