handlebars.js模板引擎

前言：常用的末班引擎有很多，但写法都大同小异。
handlebars.js就是一个纯JS库，因此你可以向其他脚本一样用script包起来。调用内部封装好的功能。

1.基于Mustache，可以在handelbars中导入Mustache模板。
利用{{ 对象 函数 }} 替换对象 或者 运行函数
支持.点语法 可以对象.title等属性值
2.使用时，直接script标签引入handlebars.js文件。

• 首先github上下载自新版本的handelbars.js http://handlebarsjs.com

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

3.基本语法
handlebarsjs 是模块中的最基本的单元，使用时用两个花括号{{ }} 包裹。eg：{{ value }} ,handlebars模块会自动匹配相应的数值，对象或者是函数。

<div class="demo">
    <h1>{{name}}</h1>
    <p>{{content}}</p>
</div>

也可以单独建立一个模板，
id（或者class）可以用来唯一确定一个模板，type是固定写法，不可或缺。

<script id="tpl" type="text/x-handlebars-template">
    <div class="demo">
            <h1>{{title}}</h1>
            <p>{{content.title}}</p>
    </div>
</script>

4.js 中使用handelbars.compile（）预编译模板 ：

//用jquery获取模板
var tpl  =  $("#tpl").html();
//原生方法
var source = document.getElementById('#tpl').innerHTML;
//预编译模板
var template = Handlebars.compile(source);
//模拟json数据
var context = { name: "zhaoshuai", content: "learn Handlebars"};
//匹配json内容
var html = template(context);
//输入模板
$(body).html(html);
5.blocks表达式

• 表达式的后面跟一个# 表示blocks

• {{ 表达式 }} 结束blocks

• 如果当前表达式是 数组则handelbars会展开数组。并将blocks的上下文设为数组元素）

比如：

<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>

6.Handelbars内置表达式（Block helper）

• each：

利用{{#each name}}来遍历列表块的内容，
用this来引用遍历的元素，指数组里的每一个元素。 name 是数组。

 <ul>
      {{#each name}}
        <li>{{this}}</li>
      {{/each}}
    </ul>

对应json是：

{
  name: ["html","css","javascript"]
};

编译后：

<ul>
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

• if else :

指定条件渲染dom；如果 {{ #if list }}，即if后的参数存在， 则渲染{{ #else }}后面的语句；否则将不会渲染都dom，将执行{{ else }}后的error语句；

{{#if list}}

    <ul id="list">
        {{#each list}}
          <li>{{this}}</li>
        {{/each}}
    </ul>
    
{{else}}
      <p>{{error}}</p>
{{/if}}

对应的json：

var data = {
    info:['HTML5','CSS3',"WebGL"],
    "error":"数据取出错误"
}

• unless

  {{ #unless }}反向的一个if语句；unless后的参数 不存在 为false时，渲染dom;
  

• with

{{#with}}一般情况下，Handlebars模板会在编译的阶段的时候进行context传递 和 赋值。
使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。
这个方法在操作复杂的template时候非常有用。
即：在使用json数据较为复杂时，我们用这种方式来确定模板里填写的内容是json对象的哪一个部分！

 <div class="entry">
    
      <h1>{{title}}</h1>
      
            {{#with author}}
                <h2>By {{firstName}} {{lastName}}</h2>
            {{/with}}
            
 </div>

对应json数据：

{
    title: "My first post!",
    author: {
         firstName: "Charles",
         lastName: "Jolley"
     }
}

7.handlebar的注释（comments）

写法：

{{! handlebars comments }}

8.handlebar的访问（path）

可以通过 . 语法访问子属性；
也可以通过 ../ 来访问父级属性。

<h1>{{author.id}}</h1>

{{#with person}}
    <h1>{{../company.name}}</h1>
{{/with}}

9.自定义helper

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

10.handelbars的jquery插件

(function($) {
      var compiled = {};
      $.fn.handlebars = function(template, data){
      if (template instanceof jQuery) {
          template = $(template).html();
  }
      compiled[template] = Handlebars.compile(template);
      this.html(compiled[template](data));
  };
})(jQuery);

$('#content').handlebars($('#template'), { name: "Alan" });