handlebar.js模板引擎（轻页面小工程可用） - JavaShuo

介绍

Handlebars 让你可以有能力高效地容易地创立语义化的模版。Handlebars兼容Mustache语法，在大多数状况下它能够读取Mustache的语法并在你当前模板中使用。具体点击这里javascript

安装

下载
npm install --save handlebars
bower install --save handlebars

开始使用

Handlebars 模板看起来就像嵌套handlebars表达式的规范的HTML。html

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

handlebars表达式: {{ cnt }}
你也能够经过<script>标签包裹handlebars表达式传递模板给浏览器：java

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

你必须把模板放在 <script>标签里，这很重要。不要直接把它放在HTML中不然HTML的解析会改变模板内容。

在JavaScript中，使用Handlebars.compile来编译模板：jquery

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
// ‘entry-template’就是包裹模板的script的id

注意这种方法在产品应用中不推荐使用。更好的方法是预编译你的模版。这将使要求的运行库更小，模板没必要在浏览器中编译，显著地节省了时间。这在移动设备上尤其重要。

在JavaScript中，使用Handlebars.compile()方法来预编译模板例如：(这是一套规则)git

//用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);

经过解析context处理handlebars模板获取HTML内容：github

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

输出html：express

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

HTML转码

Handlebars 的转码HTML值经过{{expression}}返回. 若是你不想handlebars转码一个值的话，使用{{{expression}}}npm

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{{body}}}
  </div>
</div>

上下文内容：json

{
  title: "All about <p> Tags",
  body: "<p>This is a post about &lt;p&gt; tags</p>"
}

输出:

<div class="entry">
  <h1>All About &lt;p&gt; Tags</h1>
  <div class="body">
    <p>This is a post about &lt;p&gt; tags</p>
  </div>
</div>

Handlebars 不会转义 Handlebars.SafeString. 若是你写了输出自己所含HTML的辅助 helper，你其实想返回一个新的Handlebars.SafeString.在这种状况下，你想手动拼接参数.

Handlebars.registerHelper('link', function(text, url) {
  text = Handlebars.Utils.escapeExpression(text);
  url  = Handlebars.Utils.escapeExpression(url); 
  var result = '<a href="' + url + '">' + text + '</a>';    
  return new Handlebars.SafeString(result);
});

这样能够避免字符串被转码，正确响应参数，即便你不适用{{{也不会被转码。

块级表达式

块级表达式容许你定义一个能够触发一个与当前不一样的上下文来替换模板的相应内容的helper。这些块级辅助helper经过在helper的名字前加#并在结束时名字前加/:

{{#list people}}{{firstName}} {{lastName}}{{/list}}

渲染context:

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

咱们会建立一个叫list的helper输出HTML列表。该列表以people为第一个参数，哈希选项为第二个参数。这些选项里包含一条名为fn的属性，在handlebars模板中经过这些属性名获取值

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";

  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }

  return out + "</ul>";
});

渲染结果:

<ul>
  <li>Yehuda Katz</li>
  <li>Carl Lerche</li>
  <li>Alan Johnson</li>
</ul>

块级辅助helper有不少特色，例如能够建立一个else部分.由于当你调用options.fn(context)时块级helper的内容已经被转码过，因此handlebars不会再去转码helper的内容。

handler 的路径

Handlebars 支持简单的路径，就像 Mustache.

<p>{{name}}</p>

Handlebars 也支持嵌套的属性，好比对象的属性.

<div class="entry">
  <h1>{{title}}</h1>
  <h2>By {{author.name}}</h2>

  <div class="body">
    {{body}}
  </div>
</div>

模板工做的对象context：

var context = {
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
};

这使得使用handlebars模板处理JSON字符串成为可能。内嵌的handlebars的路径也包括../语法，至关于当前路径的父级。

<h1>Comments</h1>

<div id="comments">
  {{#each comments}}
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  <div>{{body}}</div>
  {{/each}}
</div>

{{permalink}}
{{#each comments}}
  {{../permalink}}

  {{#if title}}
    {{../permalink}}
  {{/if}}
{{/each}}

这里例子中引用了相同的permalink即便他们在不一样的块中。这种行为是新的，handlebars4支持。

Handlebars的内置块表达式（Block helper）

each block helper
你可使用内置的{{#each}} helper遍历列表块内容，用this来引用遍历的元素例如：
```
<ul>  
       {{#each name}}
           <li>{{this}}</li>
       {{/each}}
   </ul>
```
对应适用的json数据
```
{
       name: ["html","css","javascript"]
   };
```
这里的this指的是数组里的每一项元素，和上面的Block很像，但原理是不同的这里的name是数组，而内置的each就是为了遍历数组用的，更复杂的数据也一样适用。
if else block helper
{{#if}}就你使用JavaScript同样，你能够指定条件渲染DOM，若是它的参数返回false，undefined, null, "" 或者 [] (a "falsy" value), Handlebar将不会渲染DOM，若是存在{{#else}}则执行{{#else}}后面的渲染。
```
{{#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":"数据取出错误"}
```
这里{{#if}}判断是否存在list数组，若是存在则遍历list，若是不存在输出错误信息

unless block helper
{{#unless}}这个语法是反向的if语法也就是当判断的值为false时他会渲染DOM 例如：

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

with block helper
{{#with}}通常状况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，咱们能够将context转移到数据的一个section里面（若是你的数据包含section）。这个方法在操做复杂的template时候很是有用。
```
<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"
     }
   }
```

Handlebar的注释（comments）

Handlebars也可使用注释写法以下

{{! handlebars comments }}

Handlebars的访问（Path）

Handlebar支持路径和mustache,Handlebar还支持嵌套的路径，使得可以查找嵌套低于当前上下文的属性
能够经过.来访问属性也可使用../,来访问父级属性。例如:（使用.访问的例子）

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

对应json数据

{
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
  };

例如：（使用../访问）

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

对应适用json数据

{
    "person":
    { "name": "Alan" },
        company:
    {"name": "Rad, Inc." }
};

自定义helper

Handlebars，能够从任何上下文能够访问在一个模板，你可使用Handlebars.registerHelper()方法来注册一个helper。

调试技巧

把下面一段"debug helper"加载到你的JavaScript代码里,而后在模板文件里经过{{debug}}或是{{debug someValue}}方便调试数据

Handlebars.registerHelper("debug", function(optionalValue) {  
  console.log("Current Context");
  console.log("====================");
  console.log(this);
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

handlebars的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" });