前言

Handlebars.js是一个非常流行的功能强大的模板引擎,简单易用,具备较好的学习社区。它基于 Mustache 模板引擎,并且做了诸多改进。利用Handlebars您可以方便的把html从javascript代码中分离出来,从而书写更清晰的代码。(项目中正好用到这个,因此就多花一些时间详细的学习研究了一下,由于博主最近有点懒,就直接转载了这篇博客,有实际帮助。)

1、引入项目

在项目中引入Handlebars非常简单,到 http://handlebarsjs.com/下载最新版本,然后使用script标签引入即可。当然您也可以使用cdn的方式,享受cdn方式的畅快。如代码所示。

// From File  
<script src="handlebars-v2.0.0.js"></script>    
// From CDN  
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

2、Templates

引入库之后,我们可以愉快的书写模板了,推荐的方式是通过特殊type的script标签来添加模板,type属性是非常重要的,否则浏览器会将它们看做javascrip解析。

模板具有一个很容易理解的语法,可以使用html、普通文本和表达式,表达式通常被包含在两对或三对花括号里,可以包含变量或功能函数。模板需要编译之后才能使用,如下面代码所示。注意一点,我们使用了jquery仅仅为了方便dom操作,handlebars可以脱离jquery良好工作。

<!--模板. -->  
<!--需要数据的地方,用{{}}括起来.-->  
<script id="address-template" type="text/x-handlebars-template">  
  <p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>  
</script>  
<!--新的内容在这里展示-->  
<div class="content-placeholder"></div>

3、Expressions 

上面所示的案例,表达式中的任何html代码将会被自动忽略,这是一个非常实用的性能,但是有的时候我们需要解析html,那么就要用三个花括号{{{ }}},如下面代码所示。

另外,handlebars表达式允许嵌套值,可以方便我们访问javascript对象的任何值。

<script id="expressions-template" type="text/x-handlebars-template">  
  {{description.escaped}}  
  {{example}}  
  <br><br>  
  {{description.unescaped}}  
  {{{example}}}  
</script>  
<div class="content-placeholder"></div>
$(function () {  
  // <span style="font-family:Arial, Helvetica, sans-serif;">抓取模板数据</span>  
  var theTemplateScript = $("#expressions-template").html();  
  // 编译模板  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  // 定义数据  
  var context={  
    "description": {  
      "escaped": "Using {{}} brackets will result in escaped HTML:",  
      "unescaped": "Using {{{}}} will leave the context as it is:"  
    },  
    "example": "<button> Hello </button>"  
  };  
  // 传送数据  
  var theCompiledHtml = theTemplate(context);  
  // 展示到页面  
  $('.content-placeholder').html(theCompiledHtml);  
});

4、Context

Handlebars利用了Mustache的强大特性,context就是其中之一。我们可以把需要传递的数据放在这个javascript对象中,使用#each、#with等方法可以方便的使用该对象的数据。

<!-- #each可以遍历数据. -->  
<script id="example-template" type="text/x-handlebars-template">  
  <!-- 遍历people -->  
  {{#each people}}  
    <!-- 直接使用每个people的数据 -->  
    <p>{{firstName}} {{lastName}}</p>  
  {{/each}}  
</script>
$(function () {  
  var theTemplateScript = $("#example-template").html();  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  var context = {  
    people: [   
      { firstName: 'Homer', lastName: 'Simpson' },  
      { firstName: 'Peter', lastName: 'Griffin' },  
      { firstName: 'Eric', lastName: 'Cartman' },  
      { firstName: 'Kenny', lastName: 'McCormick' },  
      { firstName: 'Bart', lastName: 'Simpson' }  
    ]  
  };  
  var theCompiledHtml = theTemplate(context);  
  $(document.body).append(theCompiledHtml);  
});

5、Helpers

Handlebars不允许在模板中使用javascript,而是提供了一些列的功能函数(helpers),可以在模板中调用,方便代码重用和创造复杂模板。使用表达式调用helpers的格式类似如此,{{helpername}},同时也可以传递参数,{{helpname 12345}}。

开发新的helper,使用registerHelper function,下面代码演示了如何创建新的功能函数,如何使用内置的功能函数。

<script id="built-in-helpers-template" type="text/x-handlebars-template">  
  {{#each animals}}  
    <p>  
      The {{capitalize this.name}} says  
      {{#if this.noise}}  
        "{{this.noise}}".  
      {{else}}  
        nothing since its a {{this.name}}.  
      {{/if}}  
    </p>  
  {{/each}}  
</script>  
<div class="content-placeholder"></div>
$(function () {  
  // 定义a helper  
  Handlebars.registerHelper('capitalize', function(str){  
    // str is the argument passed to the helper when called  
    str = str || '';  
    return str.slice(0,1).toUpperCase() + str.slice(1);  
  });  
  var theTemplateScript = $("#built-in-helpers-template").html();  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  var context = {  
    animals:[  
      {  
        name: "cow",  
        noise: "moooo"  
      },  
      {  
        name: "cat",  
        noise: "meow"  
      },  
      {  
        name: "fish",  
        noise: ""  
      },  
      {  
        name: "farmer",  
        noise: "Get off my property!"  
      }  
    ]  
  };  
  var theCompiledHtml = theTemplate(context);  
  $('.content-placeholder').html(theCompiledHtml);  
});

6、资源与延伸阅读

您可以通过以下资源深入学习。

Handlebars.js-官方网站,可以获取更多案例、官方文档

Try Handlebars.js-尝试不同的应用情境(基于老版本)

Handlebars Helpers-handlebars helpers

SWAG-更多

Handlebars API Reference -api文档


作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Web前端
posted 阅读(52 ) 评论(0 )

评论内容: