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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Handlebars的使用方法文档整理(Handlebars.js)相关的知识，希望对你有一定的参考价值。

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 <p> 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 <p> Tags</h1>
  <div class="body">
    <p>This is a post about <p> 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 <p> tags</p>"
    ;
    var html    = template(context);
    document.getElementById("div2").innerHTML = html;
</script>
</body>
</html>

 


Handlerbars的自定义表达式

块表达式允许你定义 helpers 生成自定义的HTML,下面这个是JS的模版; 

#list peoplefirstName 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 peoplefirstName 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 peoplefirstName 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我有Ifelse我没有If/if;
    
    #each arr
        <p>this.a > > <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)的主要内容，如果未能解决你的问题，请参考以下文章

您可以在 css 文档中使用 handlebars.js 变量吗？

Handlebars.js入门教程

Handlebars 将字符串或 Handlebars AST 传递给 Handlebars 编译

如何迭代 Handlebars 中的对象数组？

Meteor 模板事件处理程序中“this”的上下文（使用 Handlebars 进行模板）

Structure Core Depth Camera Android App UnsatisfiedLinkError: cannot locate symbol "__sfp_handl