handlebars学习总结

安装

Hbs的安装有两种方法：

1.在已有项目中使用npm安装hbs包

npm install hbs --save

这个方法只是从npm的库中把hbs包安装到了项目中，要在项目中真正使用还需要进行配置，接下来会说到

2.使用exprss-generator创建一个使用hbs的项目

这个情况是，你没有项目，而是使用express-generator这个npm包来创建一个express的项目，模板引擎选择hbs。

npm install express-generator -g

express --hbs 项目名称

这样就创建好了一个express项目，模板使用的是hbs，在app.js中已经做好了配置，不需要我们再进行额外的配置就能直接写hbs模板文件了。

配置

这里说的配置是指对express项目进行配置，使其能够支持hbs，针对安装中第一种情况说的。

在app.js中找到app.set('view engine','xxx');代码，改成如下：

app.set('view engine','hbs');

只需要这么一句就能让express项目使用hbs作为默认的模板引擎了。

修改默认后缀名

如果你看hbs这个后缀名不爽，可以修改的。修改方法很简单，app.set('view engine','cool');这样就能把默认后缀名修改成cool了。但是此时还不行，express根本不知道cool是什么，还需要建立cool 跟hbs模板引擎之间的关联关系。

app.engine('cool',require('hbs').__express);

好了，这样我们就把默认后缀从hbs改成了cool。

express选择模板引擎的策略

1.如果没有后缀名，取系统设置的默认后缀名，并且根据该后缀名获取相应的模板引擎。

2.如果有后缀名，直接使用后缀名去取相应的模板引擎。

express很容让多种模板引擎共存，都不需要额外的配置。

为模板提供自定义的helper

hbs 是业务逻辑无关的模板引擎（logic-less template)。所以不建议在模板文件中写太复杂的代码。不过对于简单的功能在不同模板文件中多次出现，我们可以使用hbs提供的 registerHelper把代码注册成helper，那么就可以在模板文件直接调用了，提高代码重用。注册helper的方法如下：

hbs.registerHelper('sayHello',function(){

......

});

上面代码注册了一个名字为sayHello的方法，在写模板文件时就能直接调用。该方法是可以定义参数的。调用的方法我们会在下面说到。

使用partial精简模板

我们经常会遇见，多一个页面的头和尾部的代码都是相同，为一个不同的是中间的内容部分。这样我们就可以使用registerPartial定义partial。在需要使用的模板文件中直接引用该partial模板文件就可以了。跟helper一样都是代码重用的作用。

hbs.registerPartial(name,partial);

例如:

hbs.registerPartial('header','<head><title>{{title}}</title></head>');

调用方法下面会说到。

语法

接下里说一说模板文件编写的语法。在此之前先说一下context概念。express使用模板引擎的方式是res.render('模板文件名称',{});第二个参数是传给模板的数据，称做上下文(context)。

注释

这两种都是注释，区别在于，前者会保留下来，后者只是在模板文件中的注释，编译成html后就没有了。

简单表达式

{{name}}或{{{name}}}

从上下文中取出name属性显示出来。前者会对内容进行转义，而后者不会。比如name为John，前者输出的是John 后者会原样输出。

块表达式

{{#if condition}}

......

开始标记是#关键字,结束是/关键字

调用helper

sayHello是我们定义的helper，如果sayHello需要参数，只需要在调用的时候加上传入的参数，如:

{{sayHello param1 param2}}

使用partial

内置流程控制块

if

......

....

...

with

它的功能是减少引用对象的深度，我们这里假设上下文是

{

name:"少年PI的奇幻漂流",

author:{

name:"外国人",

motherland:{

name:"外国",

position:"大西洋"

}

我们在些模板时，对于祖国这一块数据的展示，如下：

祖国：{{author.motherland.name}}

位置：{{author.motherland.position}}

是不是有很多重复的前缀，这时候就可以使用with了

祖国：name

位置：position

如果层次更深，属性更多的话，好处就很明显了，以上例子中只有两个属性。

each

这是实现循环的.

.....

arr是一个集合。

自定义块

以上介绍的是handlebars内置的，我们可以自己定义满足自己需要的块。定义的方法很简单，就是使用registerHelper。

hbs.registerHelper('myblock',function(options){

return options.fn(this);

});

可以在模板中这样调用：

这是我的myblock{{title}}

假设调用块的这个模板文件的上下文中有title属性，它的值是cool!，那么上面调用产生的结果就是:

这是我的myblockcool!

块定义中options.fn是调用处块中间的模板代码片段编译后产生的模板方法，它是一个方法。

资源

http://handlebarsjs.com/

https://github.com/wycats/handlebars.js/

https://www.npmjs.com/package/hbs

https://github.com/donpark/hbs