handlebars学习笔记

一、基本步骤

1.获取模板块的内容 <script>标签的type 为text/x-handlebars-template

2.handlebars预编译模板

3.匹配数据，插入html

二、基本概念

数据里是字符串就直接显示，函数直接执行

.运算符

html转义要通过{{{}}}才能让html标签起作用，不然html标签就会被编译成字符串。

<div id="wrap"><div>
<script src="handlebars-v3.0.3.js"></script>
<!-- 模板-->
<script id="template" type="text/x-handlebars-template">
        <div>
            <h1>{{{title}}}</h1>
            <div>{{fn}}</div>
            <div>{{data.value}}</div>
        </div>
</script>
<script>
//获取模板内容
    var sourse = document.getElementById('template').innerHTML,
//预编译
                template = Handlebars.compile(sourse),

                content = {
                    title:'<a href="javascript:">handlebars</a>',
                    fn:function(){
                        return 'str';
                    },
                    data:{
                        label:'数据',
                        value:[1,2,3]
                    },
                    block:{
                        name:['Tom','Lucy']
                    }
                };var html = template(content);
            document.getElementById('wrap').innerHTML = html;
</script>

三、块级表达式

<ul>  
{{#programme}}
    <li>{{language}}</li>
{{/programme}}
</ul>
有如下json数据
{
  programme: [
    {language: "JavaScript"},
    {language: "HTML"},
    {language: "CSS"}
  ]
}
编译结果
<ul>  
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

四、内置块级表达式

each if else unless

each 循环中{{@index}}表示当前的index值（从0开始）

this 指当前的数据对象

五、自定义helper

Handlebars.registerHelper()方法来注册一个helper

<!DOCTYPE html>
<html>
  <head>
    <META charset=utf-8">
    <title>由于if功力不足引出的Helper - by 杨元</title>
  </head>
  <body>
    <h1>由于if功力不足引出的Helper</h1>
    <!--基础html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody id="tableList"> 
      </tbody>
    </table>
    
    <!--插件引用-->
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each student}}
        {{#if name}}
          {{#compare age 20}}
            <tr>
              <td>{{name}}</td>
              <td>{{sex}}</td>
              <td>{{age}}</td>
            </tr>
          {{else}}
            <tr>
              <td>?</td>
              <td>?</td>
              <td>?</td>
            </tr>
          {{/compare}}
        {{/if}}
      {{/each}}
    </script>
    
    <!--进行数据处理、html构造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模拟的json对象
        var data = {
                    "student": [
                        {
                            "name": "张三",
                            "sex": "0",
                            "age": 23
                        },
                        {
                            "sex": "0",
                            "age": 22
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18
                        }
                    ]
                };
        
        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
        var myTemplate = Handlebars.compile($("#table-template").html());
        
        //注册一个比较大小的Helper,判断v1是否大于v2
        Handlebars.registerHelper("compare",function(v1,v2,options){
          if(v1>v2){
            //满足添加继续执行
            return options.fn(this);
          }else{
            //不满足条件执行{{else}}部分
            return options.inverse(this);
          }
        });        
        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
        $('#tableList').html(myTemplate(data));
      });
    </script>
  </body>
</html>

Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，第三个参数是固定的，就叫options，如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。

关于options的使用，return options.fn(this);表示满足条件继续执行，也就是执行{{#compare }}和{{else}}之间的代码；return options.inverse(this);表示不满足条件，也就是执行{{else}}和{{/compare}}之间的代码。

options.fn(context)当前数据对象的context

options.inverse 相反作用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>handlebars</title>
</head>
<body>
    <div id="wrap"></div>

    <script src="handlebars-v3.0.3.js"></script>

<script id="template" type="text/x-handlebars-template"> 
<div id="wrap"> 
<h1>{{{title}}}</h1> 
<div>{{fn}}</div>
<div>{{data.value}}</div> 
</div> 
<ul> 
{{#block}} 
{{#each name}}
 <li>{{this}}</li>
 <li>{{@index}}</li> 
{{/each}} 
{{/block}} 
</ul> 
<ul> 
{{#with block}} 
<li>{{name}}</li> 
<li>{{name}}</li> 
{{/with}} 
</ul> 
<ul> 
{{#with block}} 
<li>{{../title}}</li> 
{{/with}} 
</ul>  
{{debug}}
</script> 
<script> 
window.onload = function(){
var sourse = document.getElementById('template').innerHTML, 
template = Handlebars.compile(sourse), 
content = { 
title:'<a href="javascript:">handlebars</a>', 
fn:function(){ return 'str'; }, 
data:{ label:'数据', value:[1,2,3] }, 
block:{ name:['Tom','Lucy'] } 
};

　　　　　　//注意registerHelper的位置  因为没有options所有是行内块级表达式 可以不用#
            Handlebars.registerHelper('debug',function(){
                console.log('------------------');
            });
            var html = template(content);
            document.getElementById('wrap').innerHTML = html;

        }
    </script>
</body>
</html>

posted on 2015-09-26 14:30 xinup 阅读(1568) 评论(0) 收藏举报

刷新页面返回顶部

xinup