Handlebars的使用方法文档整理(Handlebars.js)

时间：2022-09-23 21:11:48

Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;

Handlebars.js和Mustache 的区别

目前版本为 2.0.0, 无压缩的情况下目测是 3000行源代码,约 200kb;

下面这个是基本的模版表达式,

其中  {{  和  }}  之间为handlerbars的变量; 
<div class="entry">

  <h1>{{title}}</h1>

  <div class="body">

    {{body}}

  </div>

</div>

查看更多表达式的用法

把数据放到自己定义的 <script> 标签中;
<script id="entry-template" type="text/x-handlebars-template">

  template content

</script>

编译模版

使用 Handlebars.compile 进行编译模版;
var source   = $("#entry-template").html();

var template = Handlebars.compile(source);
智能编译模版(在移动端也能运行哦么么哒)

更多有关预编译的链接(Precompilation)

生成html代码

通过上面的模版和数据混合编译后的结果: 
var context = {title: "标题", body: "我是字符串!"}

var html    = template(context);
JS生成的结果如下:
<div class="entry">

  <h1>标题</h1>

  <div class="body">

   我是字符串!

  </div>

</div>

更多template选项

//代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div1"></div>

<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">

      <h1>{{title}}</h1>

      <div class="body">

        {{body}}

      </div>

    </div>

</script>

<script>

    //JS代码

    var source   = $("#entry-template").html();

    var template = Handlebars.compile(source);

    var context = {title: "标题", body: "我是字符串!"}

    var html    = template(context);

    document.getElementById("div1").innerHTML = html;

</script>

</body>

</html>
//模版的代码和JS的代码如防止HTML被转义的方法;
{{ }}和 {{{}}}和区别就是, 如果你不希望变量里面的字符串被转义就使用{{{ }}}对变量进行处理;
<div class="entry">

  <h1>{{title}}</h1>

  <div class="body">

    {{{body}}}

  </div>

</div>
数据如下：
{

  title: "All about <p> Tags",

  body: "<p>This is a post about &lt;p&gt; tags</p>"

}

定义的Helper如下

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

    });
渲染以后的结果如下：
<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>

 
//代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div2"></div>

<script id="entry-template1" type="text/x-handlebars-template">

    <div class="entry">

      <h1>{{title}}</h1>

      <div class="body">

        {{{body}}}

      </div>

    </div>

</script>

<script>

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

    });

    var source   = $("#entry-template1").html();

    var template = Handlebars.compile(source);

    var context = {

      title: "All about <p> Tags",

      body: "<p>This is a post about &lt;p&gt; tags</p>"

    };

    var html    = template(context);

    document.getElementById("div2").innerHTML = html;

</script>

</body>

</html>

Handlerbars的自定义表达式

块表达式允许你定义 helpers 生成自定义的HTML,下面这个是JS的模版; 
{{#list people}}{{firstName}} {{lastName}}{{/list}}
如果你使用下面的数据:
{

  people: [

    {firstName: "Yehuda", lastName: "Katz"},

    {firstName: "Carl", lastName: "Lerche"},

    {firstName: "Alan", lastName: "Johnson"}

  ]

}
在JS里面定义这个helper;
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> " ;       /*options.fn相当于一个编译的函数*/

  }  

  return out + "</ul>";

});
执行以后的结果是:
<ul>

  <li>Yehuda Katz</li>

  <li>Carl Lerche</li>

  <li>Alan Johnson</li>

</ul>
自定义块表达式还有很多别的特性, 比如可以直接使用 IF 和 ELSE；

Learn More: Block Helpers

 
//代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div3"></div>

<script id="entry-template2" type="text/x-handlebars-template">

    {{! 这个是模版的注释 }}

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

</script>

<script>

    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> " ;       /*options.fn相当于一个编译的函数*/

      }  

      return out + "</ul>";

    });

    var source   = $("#entry-template2").html();

    var template = Handlebars.compile(source);

    var context = {

      people: [

        {firstName: "Yehuda", lastName: "Katz"},

        {firstName: "Carl", lastName: "Lerche"},

        {firstName: "Alan", lastName: "Johnson"}

      ]

    };

    var html    = template(context);

    document.getElementById("div3").innerHTML = html;

</script>

</body>

</html>

 

Handlebars次级数据的渲染

Handlebars支持简单的下级对象获取和上级对象获取, 跟 Mustache一样样的. 
<p>{{name}}</p>
Handlebars 也支持多层次的数据展示, 模版如下.
<div class="entry">

  <h1>{{title}}</h1>

  <h2>By {{author.name}}</h2>

  <div class="body">

    {{body}}

  </div>

</div>
下面这个是要使用到的Handlebars的 数据;
var context = {

  title: "My First Blog Post!",

  author: {

    id: 47,

    name: "Yehuda Katz"

  },

  body: "My first post. Wheeeee!"

};
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div4">

</div>

<script id="entry-template3" type="text/x-handlebars-template">

    <div class="entry">

      <h1>{{title}}</h1>

      <h2>By {{author.name}}</h2>

      <div class="body">

        {{body}}

      </div>

    </div>

</script>

<script>

    var source   = $("#entry-template3").html();

    var template = Handlebars.compile(source);

    var context = {

      title: "My First Blog Post!",

      author: {

        id: 47,

        name: "Yehuda Katz"

      },

      body: "My first post. Wheeeee!"

    };

    var html    = template(context);

    document.getElementById("div4").innerHTML = html;

</script>

</body>

</html>
Handlebars 可以迭代Object对象(纯对象或者数组); 在模版中的../是对象的父级;
<h1>Comments</h1>

<div id="comments">

  {{#each comments}}

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

  <div>{{body}}</div>

  {{/each}}

</div>
下面展示的name都是同样的东西;
<p>{{./name}} or {{this/name}} or {{this.name}}</p>

Handlebars模版中的注释可以使用 {{!-- --}} 或者 {{! }}或者 <!-- -->.

可以把模版专用的注释写在模版文件里面么么哒. 提高代码的可读性, 这个也算是最佳实践吧; 
<div class="entry">

  {{!-- only output this author names if an author exists --}}

  {{#if author}}

    <h1>{{firstName}} {{lastName}}</h1>

  {{/if}}

</div>
{{!-- --}}和{{! }}的注释不会出现在生成的代码中; 如果使用 <!-- --> 注释的代码会出现在生成的代码中;
<div class="entry">

  {{! This comment will not be in the output }}

  <!-- This comment will be in the output -->

</div>

自定义标签(Helpers)

Handlebars的自定义标签可以使用在Handlebars模版的任何地方,必须使用
Handlebars.registerHelper注册到即可; 上代码: 
<div class="post">

  <h1>By {{fullName author}}</h1>

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

  <h1>Comments</h1>

  {{#each comments}}

  <h2>By {{fullName author}}</h2>

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

  {{/each}}

</div>
这个是要用到的data
var context = {

  author: {firstName: "Alan", lastName: "Johnson"},

  body: "I Love Handlebars",

  comments: [{

    author: {firstName: "Yehuda", lastName: "Katz"},

    body: "Me too!"

  }]

};

//就是下面这个helper提供了模版中的自定义标签;

Handlebars.registerHelper('fullName', function(person) {

  return person.firstName + " " + person.lastName;

});
生成的结果如下:
<div class="post">

  <h1>By Alan Johnson</h1>

  <div class="body">I Love Handlebars</div>

  <h1>Comments</h1>

  <h2>By Yehuda Katz</h2>

  <div class="body">Me Too!</div>

</div>

代码如下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div5"></div>

<script id="entry-template5" type="text/x-handlebars-template">

    <div class="post">

      <h1>By {{fullName author}}</h1>

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

      <h1>Comments</h1>

      {{#each comments}}

      <h2>By {{fullName author}}</h2>

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

      {{/each}}

    </div>

</script>

<script>

    var context = {

      author: {firstName: "Alan", lastName: "Johnson"},

      body: "I Love Handlebars",

      comments: [{

        author: {firstName: "Yehuda", lastName: "Katz"},

        body: "Me too!"

      }]

    };

    //就是下面这个helper提供了模版中的自定义标签;

    Handlebars.registerHelper('fullName', function(person) {

      return person.firstName + " " + person.lastName;

    });

    var source   = $("#entry-template5").html();

    var template = Handlebars.compile(source);

    var html    = template(context);

    document.getElementById("div5").innerHTML = html;

</script>

</body>

</html>
 
 
在自定义标签的Helper可以使用this, this是当前的对象; 
<ul>

  {{#each items}}

  <li>{{agree_button}}</li>

  {{/each}}

</ul>
这个是填充的数据和定义的Helpers:
var context = {

  items: [

    {name: "Handlebars", emotion: "love"},

    {name: "Mustache", emotion: "enjoy"},

    {name: "Ember", emotion: "want to learn"}

  ]

};

Handlebars.registerHelper('agree_button', function() {

  var emotion = Handlebars.escapeExpression(this.emotion),

      name = Handlebars.escapeExpression(this.name);

  return new Handlebars.SafeString(

    "<button>I agree. I " + emotion + " " + name + "</button>"

  );

});
生成的结果如下:
<ul>

  <li><button>I agree. I love Handlebars</button></li>

  <li><button>I agree. I enjoy Mustache</button></li>

  <li><button>I agree. I want to learn Ember</button></li>

</ul>
如果你希望你返回的HTML代码不被转义, 就要在定义的Helper中返回 new Handlebars.SafeString;

return new Handlebars.SafeString(代码)

自定义标签(Helpers)的更多信息;

Handlebars 提供
if 在模版中进行简单的逻辑处理; 以及迭代处理的标签
each .

自定义helper的更多信息

 
//例子代码段: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div6"></div>

<script id="entry-template6" type="text/x-handlebars-template">

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

</script>

<script>

    var context = {

      people: [

        {firstName: "Yehuda", lastName: "Katz"},

        {firstName: "Carl", lastName: "Lerche"},

        {firstName: "Alan", lastName: "Johnson"}

      ]

    };

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

    });

    var source   = $("#entry-template6").html();

    var template = Handlebars.compile(source);

    var html    = template(context);

    document.getElementById("div6").innerHTML = html;

</script>

</body>

</html>

//handlebars的IF ELSE语句和 each语句的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div7"></div>

<script id="entry-template7" type="text/x-handlebars-template">

    {{#if haveIf}}我有If{{else}}我没有If{{/if}};

    {{#each arr}}

        <p>{{this.a}} &gt; &gt; <span>this.data</span></p>

    {{/each}}

    {{!迭代这条对象}}

    {{#each test}}

            {{!如果满足条件就打印第一个模版， 如果不满足条件就打印第二个模版, helper做的只是对数据进行判断而已}}

        {{#inverse}}

            <p>{{this.direct}}</p>

        {{else}}

            <p>inverse:{{this.inverse}}</p>

        {{/inverse}}

    {{/each}}

</script>

<script>

    var context = {

        haveIf : true,

        arr : [

            { a : "a" , data : "___a"},

            { a : "b" , data : "___b"},

            { a : "c" , data : "___c"}

        ],

        test : [

            {

                condition : true,

                direct : "打印dir"

            },

            {

                condition : false,

                direct : "dir",

                inverse : "打印inverse"

            }

        ]

    };

    Handlebars.registerHelper('inverse', function(options) {

        if( this.condition ) {

            return options.fn(this);

        }else{

            return options.inverse(this);

        }

    });

    var source   = $("#entry-template7").html();

    var template = Handlebars.compile(source);

    var html    = template(context);

    document.getElementById("div7").innerHTML = html;

</script>

</body>

</html>

更多handlebars的API查看

Handlebars的使用方法文档整理(Handlebars.js)的更多相关文章

  1. 转载：Object的create方法文档

    源地址:https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/create#.E4.B ...

  2. 将Html文档整理为规范XML文档

    有多种方式可以在.NET 平台进行HTML文件解析.数据提取,其中最简单.稳妥的办法是先使用工具将Html文档整理成XML文档,再通过XML Dom模型或XPath灵活地进行数据处理.SGML便是一个 ...

  3. AFC项目开发文档整理

    AFC项目开发文档整理 PHPCMS 的确是一个伟大的CMS,我对它爱不释手. 标签嵌套无法loop获取的解决办法.关键代码如下: /\*后台添加\*/ $str = preg_replace ( & ...

  4. QM项目开发文档整理

    QM项目开发文档整理 前言 在W公司工作4个多月,庆幸接触到的全是"硬"项目,真枪实干,技术.经验.能力都得到了很大提升. QM项目 此项目WEB前端学到的东西很多,对PHP项目的 ...

  5. 【官档整理】Visual Studio 2017 VS2017 中文离线安装包下载

    [官档整理]Visual Studio 2017 VS2017 中文离线安装包下载 转 https://blog.csdn.net/fromfire2/article/details/81104648 ...

  6. Es官方文档整理-3&period;Doc Values和FieldData

    Es官方文档整理-3.Doc Values和FieldData 1.Doc Values 聚合使用一个叫Doc Values的数据结构.Doc Values使聚合更快.更高效且内存友好. Doc Va ...

  7. Es官方文档整理-2&period;分片内部原理

    Es官方文档整理-2.分片内部原理 1.集群      一个运行的Elasticsearch实例被称为一个节点,而集群是有一个或多个拥有相同claster.name配置的节点组成,他们共同承担数据和负 ...

  8. NodeJS-001-Nodejs学习文档整理&lpar;转-出自http&colon;&sol;&sol;www&period;cnblogs&period;com&sol;xucheng&rpar;

    Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...

  9. Ionic2文档整理

    来自:Rainey's Blog 原文地址:http://rainey.space/2016/04/06/Ionic2_Chinese_Document/ Github:https://github. ...

随机推荐

  1. 2&period;4G无线射频通信模块nRF24L01&plus;开发笔记（基于MSP430RF6989与STM32f0308）（1&period;（2）有错误，详见更正）

    根据网上的nRF24L01+例程和TI提供的MSP430RF6989的硬件SPI总线例程编写程序,对硬件MSP-EXP430RF6989 Launch Pad+nRF24L01P射频模块(淘宝购买)进 ...

  2. Linux 条件判断

    1. 按照文件类型判断 -b 文件 #判断文件是否存在,并且是设备文件 -c 文件 #判断文件是否存在,并且是字符设备文件 -d 目录 #判断目录是否存在,并且是否为目录(是目录返回真) -e 文件 ...

  3. vsftp搭建&plus;虚拟用户

    yum安装vsfpd: [root@localhost ~]# yum -y install vsftpd db4-utils Loaded plugins: fastestmirror, refre ...

  4. MyBatis学习总结1

    MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用 ...

  5. 如何监控 Nginx？

    什么是 Nginx? Nginx("engine-x")是一个 HTTP 和反向代理服务器,同时也是一个邮件代理服务器和通用的 TCP 代理服务器.作为一个免费开源的服务器,Ngi ...

  6. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

  7. 一个可以控制提示框显示为top&comma;bottom&comma;left&comma;right的小方法

    html代码 <!doctype html><html><head><meta charset="utf-8"><title& ...

  8. 购物篮算法的理解-基于R的应用

    是无监督机器学习方法,用于知识发现,而非预测,无需事先对训练数据进行打标签,因为无监督学习没有训练这个步骤.缺点是很难对关联规则学习器进行模型评估,一般都可以通过肉眼观测结果是否合理. 一,概念术语 ...

  9. jenkins&plus;springboot&plus;svn linux 自动化部署

    需要下载 publish over ssh 插件(远程上传项目到服务器) Maven Integration plugin 插件(构建maven项目) 然后将各种配置配置好 最终项目在服务器上的路径是 ...

  10. IDEA&lpar;jetbrain通用&rpar;优雅级使用教程（转）

    文章转自  http://www.jianshu.com/p/3160ff832a9b 前面写过一篇IDEA的入门级文章,但是只学会了那些配置啊什么的并不能提高我们的开发效率.事实上,如果你IDEA用 ...

相关文章