Handlebars的使用方法及技巧

• Templates
  使用模板的方法只需引入handlebars库即可使用，通过两个大括号的方式将变量包含起来，对应的数据就会展示到定义好的模板中展示，这块如果碰上数据想解析成html代码时可使用三个大括号展示

<script type="text/template" id="my_tem">
    <div class="demo">
        <h1>{{name}}</h1>
        <p>{{content}}</p>
        <h2>{{food.like1}}</h2>
        {{{dom}}}
    </div>
</script>

对应的JS代码以及数据如下：

var data={
      name:'lx',
        content:'this is my first tml',
        food:{
            "like1":'tomato',
            "like2":'apple'
        },
        dom:"<div>直接解析</div>"
    };
let tpl=$("#my_tem").html();					//获取模板内容
let template=Handlebars.compile(tpl);			//预编译模板
let html=template(data);						//匹配数据
$("body").append(html);						//插入到DOM

• 循环遍历#each
  each方法如同js中的循环一样，遍历数据然后插入到模板中，each使用方法如下：

<script id="table-template" type="text/template">
     {{#each student}}
       <tr>
         <td>{{addOne @index}}</td>
         <td>ss{{name}}</td>
         <td>{{sex}}</td>
         <td>{{age}}</td>
       </tr>
      {{/each}}
 </script>
 <script type="text/javascript">
 	var data = {
            "student": [
                 {
                     "name": "张三",
                     "sex": "0",
                     "age": 18
                 },
                 {
                     "name": "李四",
                     "sex": "0",
                     "age": 22
                 },
                 {
                     "name": "妞妞",
                     "sex": "1",
                     "age": 19
                 }
             ]
         };
 	let  tpl=$("#table-template").html();
 	let  template=Handlerbars.compile(tpl);
 	let  html=template(data);
	Handlebars.registerHelper("addOne",function(index,options){
         return parseInt(index)+1;
   	});
 	$("body").append(html);
 </script>

• Helper函数
  在上面的代码中的addOne @index用来实现对table表格的一个序号标记，这块用到了Helpers功能函数，通过registerHelper方法来实现，具体的实现方式如代码可见，在模板中我们通常可以多次使用这个方法来对我们所需要的数据进行一个改变。