浅析Handlebars.js的使用流程

Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切。
第一步：导入相关的JS文件
Handlebars 是一个Jquery插件，在引入Handlebars .js之前需要引进jquery.js。

 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script>

第二步：编写Handlebars 模板
Handlebars的表达式 是以“{{”开始，以“}}”结尾。如果上下文中包含HTML代码，则需要把双大括号换成三个大括号即可：{{{，可以通过<script>标签把模板加载到浏览器中，并设置 <script> 标签的type属性为浏览器不能够辨别的（此处可自由发挥）。

<script id="list-template" type="text/x-handlebars-template">
    {{#each data}}
        <tr>
            <td>姓名:{{name}}</td> 
            <td>年龄:{{age}}</td>
            <td>性别:{{sex}}</td>
        </tr>       
    {{/each}} 
</script>

第三步：预编译Handlebars 的模板
在 JavaScript 中可以使用 Handlebars.compile()方法来编译模板。

var source   = $("#list-template").html();
var template = Handlebars.compile();

第四步：传递上下文，执行模板

var data=[
    {name:"张三",age:"18"，sex："男"},
    {name:"李四",age:"22"，sex："女"},
    {name:"王五",age:"24"，sex："男"}
];
var html = template({data:data});

执行之后，这个模板就会渲染出：

<tr>
    <td>姓名:张三</td> 
    <td>年龄:18</td>
    <td>性别:男</td>       
</tr> 
<tr>
    <td>姓名:李四</td> 
    <td>年龄:22</td>
    <td>性别:女</td>       
</tr> 
<tr>
    <td>姓名:王五</td> 
    <td>年龄:24</td>
    <td>性别:男</td>       
</tr> 

本篇文章只是叙述了使用Handlebars最基础的流程，后续将讲解Handlebars.js的具体用法。