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为<p>John</p>,前者输出的是&lt;p&gt;John&lt;/p&gt; 后者会原样输出。

 

块表达式

{{#if condition}}

......

{{/if}}

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

调用helper

{{sayHello}}

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

{{sayHello param1 param2}}

 

使用partial

{{> mypartial}}

 

内置流程控制块

if

{{#if 条件}}

......

{{/if}}

{{#if 条件}}

....

{{else}}

...

{{/if}}

 

with

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

{

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

    author:{

                 name:"外国人",

                 motherland:{

                                      name:"外国",

                                      position:"大西洋"

                                   }

                }

}

 

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

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

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

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

{{#with author.motherland}}

祖国:name

位置:position

{{/with}}

 

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

 

each

这是实现循环的.

{{#each arr}}

.....

{{/each}}

arr是一个集合。

 

自定义块

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

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

    return options.fn(this);

});

 

可以在模板中这样调用:

{{#myblock}}

<p>这是我的myblock</p>{{title}}

{{/myblock}}

 

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

<p>这是我的myblock</p>cool!

 

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

 

资源

https://github.com/donpark/hbs

发布了49 篇原创文章 · 获赞 34 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章