浅析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的具体用法。