井井客

搜索

Handlebars.js模板引擎

最近工作的项目中用到了Handlebars.js模板引擎,对于使用于JS框架的小伙伴来说,Handlebars入门非常简单,花半天时间就可以掌握了。

Handlebars.js模板引擎

如何引用啥的这里就不多说了,下面主要整理了常用代码与说明。参考链接:http://handlebarsjs.com/

理解Handlebars很简单,可以将它看成两个主要部分:视图以及数据。而辅助功能可以慢一步再了解。

视图也是我们写在html中的一段模板代码,而模板内容则是写在一对script标签内,script标签需要设置type属性为text/x-handlebars-template,并且我们经常还会设置id属性用于获取里面的html内容。例如:

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

上面代码中出来的{{title}}与{{body}}就是我们接下来要说到的数据(Handlebars中用两个大括号来匹配数据,这是我的理解→_→至于高大上的句柄名词我啥也不懂)。

而在说数据前还有点需要明白,就是如何连接视图与数据。它们的连接其实就是一个套路,像下面这样子:

// 获取html内容,也可以使用类似 jQuery的html()方法获取
var source   = document.getElementById("entry-template").innerHTML;
// 预编译模板
var template = Handlebars.compile(source);
// 模拟数据
var context = {title: "My New Post", body: "This is my first post!"};
// 匹配数据
var html    = template(context);

上面代码中的context是我们模拟的数据,与之前代码中的{{title}}与{{body}}产生了关联,最后模板渲染的结果如下:

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

一个简单的Handlebars.js模板引擎使用实例就是这样子。但是这也只是一个基础,当数据有一定的复杂度,如含有嵌套、数组时,我们需要进一步了解。

嵌套,只要像我们平常一样用点去链接就可以了。例如:{{author.name}}

数组,这种情况比较常用,这时我们可以使用each去遍历,例如:

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

上面可以注意到each和我们标签其实很像,有开始{{#each 数组数据}}和结束{{/each}}。

另外就是逻辑常用的if和else在Handlebars模板引擎中也是有的。例如:

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

细心的小伙伴可能也发现了,上面代码中出现的一个类似路径的东西../。这个也是模板中Handlebars Paths。

当我们在数据嵌套里层时,可以像路径一样,访问外层,这个多试试就可以发现规律了~

另外Handlebars也支持模板注释{{!-- --}}和{{! }}。

这些就是Handlebars.js模板引擎常用的东西了。另外还有一些如Handlebars.registerHelper与Handlebars.registerPartial可以参考最上面的那个地址。

文章TAG:JS

作者:井井客整理来源:原创
本文标题:Handlebars.js模板引擎
本文链接:/c/29326.html

上一篇:mac下的command not found
下一篇:gulp.js入门篇

文章分类

相关阅读

随便看看