hbs是Express提供的默认视图引擎, 是对Handlerbars的封装. 具体用法参考下面的项目地址, 这里额外说明使用Handlerbars模板引擎及其开发配套的一些插件用法.
Handlerbars使用环境: Node+Express+hbs后端渲染模式
主插件
- Handlerbars
- hbs
拓展插件
- handlebars-layouts
- handlebars-helpers
- hbs-utils
Handlerbars
Handlebars是一个Javascript模板引擎, 能让你轻松高效的编写语义化模板, 它是Mustache模板引擎的一个扩展, Handlebars和Mustache都是弱逻辑的模板引擎, 能将Web前端的视图和代码分离, 降低两者之间耦合.
Handlebars以声明式的书写方式定义模板逻辑, 一切都是表达式, 编写简单易于拓展, 可前后端共用.
学习Handlebars主要是理解:
- 模板函数: Markup字符串 = 模板函数 + 数据
- Helper: 逻辑处理/数据过滤/内容转移等, 使用前必须注册
- Partials: 子模板, 使用前必须注册
-
{{}}和{{{}}}的区别 - inline helper和block helper的不同写法
hbs
Express.js view engine for handlebars.js
hbs是一个运行在Express上, 对Handlerbars模板引擎再次封装的视图引擎.
特点
1. registerPartials
registerPartial可输入路径注册, 对应的方法: hbs.registerPartials, 会比原始方法更便捷.
2. localsAsTemplateData
可在视图模板中传入node环境变量/全局变量
var hbs = require('hbs');
var express = require('express');
var app = express();
hbs.localsAsTemplateData(app);
app.locals.foo = "bar";
top level: {{@foo}}
3. handlebars实例
因为是对Handlerbars的封装, Handlerbars的实例在这里取到:
// hbs.handlebars is the handlebars module
hbs.handlebars === require('handlebars');
问题点
1. 如何根据页面插入对应的style和script
可以使用下面讲到的handlebars-layouts处理这个需求, 主要是使用Helper的特性.
2. 如何更换layout.hbs的路径和名称
// view的路径
app.set('views', path.join(__dirname, 'client/views'))
// 模板后缀
app.set('view engine', 'hbs')
// layout名称
app.set('view options', {layout: 'layout.hbs'})
3. 模板加载顺序
1. compile body template(inject all partials and helpers)
2. inject to layout template
handlebars-layouts
这个插件提供handlerbars的基础布局的helper, 包括: extend/embed/content/block四种子模板嵌套结构, 具体来说就是: 继承/嵌套/定义内容及插入方式/插入点.
这四种功能我认为已经能覆盖到所有使用的环境了.
Helper介绍
1. extend
Extend Helper是继承的意思, 与ES6的Class Extend类似, 将继承的模板拿来与当前模板整合, Extend的内容不能包括HTML的tag, 只能是各类Helper.
逻辑思路是这样:
将"layout"子模板拿来, 嵌入
content中定义的内容(根据content的名称在"layout"中找到对应的block), 之后返回组装好的模板.
例如:
{{#extend "layout"}}
{{#content "head" mode="append"}}
{{/content}}
{{#content "body"}}
Welcome Home
{{#items}}
- {{.}}
{{/items}}
{{/content}}
{{#content "foot" mode="prepend"}}
{{/content}}
{{/extend}}
2. embed
Embed Helper是嵌入的意思, 将Embed模板嵌入当前的子模板中, 同样, Embed的内容不能包括HTML的tag, 只能是各类Helper.
逻辑思路是这样:
将"gallery"子模板拿来,"gallery"中嵌入内部定义的
content内容, 之后将"gallery"整体嵌入当前模板内, 之后是继承的操作...
例如:
{{#extend "layout"}}
{{#content "body"}}
{{#embed "gallery"}}
{{#content "body"}}
{{/content}}
{{/embed}}
{{#embed "modal" foo="bar" name=user.fullName}}
{{#content "title" mode="prepend"}}Image 1 - {{/content}}
{{#content "body"}}{{/content}}
{{/embed}}
{{/content}}
{{/extend}}
3. block
Block Helper定义一个插入点, 插入的内容由Content Helper定义. Block Helper内部可定义一些HTML Markup.
逻辑思路是这样:
类似于Vue/Angular的slot概念
例如:
{{#block "header"}}
Hello World
{{/block}}
{{#block "main"}}
Lorem ipsum...
{{/block}}
{{#block "footer"}}
© 1970
{{/block}}
4. content
Content Helper定义一个插入内容, mode可以决定插入的方式, 比如: 前插入(prepend)/后插入(append)/替换(replace). 默认是替换(replace).
例如:
{{#extend "layout"}}
{{#content "header"}}
Goodnight Moon
{{/content}}
{{#content "main" mode="append"}}
Dolor sit amet.
{{/content}}
{{#content "footer" mode="prepend"}}
MIT License
{{/content}}
{{/extend}}
安装
var hbs = require('hbs')
var layouts = require('handlebars-layouts')
hbs.registerHelper(layouts(hbs.handlebars))
问题点
1. createFrame未定义报错
hbs是对handlebars的再次封装, 因此handlebars-layouts初始化使用的handlebars实例并不是hbs, 因为hbs中并没有createFrame方法(handlebars-layouts需要这个方法, 没有会报错).
因此, 初始化时需要从hbs中调用handlebars的原始实例(不需要重复引入handlebars)
hbs.registerHelper(layouts(hbs.handlebars))
2. 子模板未找到
extend和embed操作的模板都是partials, 注意使用前需要registerPartials注册.
3. hbs子模板更改页面没生效
registerPartials注册是一次性行为, 除非有watch文件再次执行注册, 或者重启node服务, 否则node中保存的都是第一次的编译结果, 关于watch的工具会在hbs-utils中讲到.
4.extend和embed书写的partials在页面没正常初始化
可能是未正常初始化的Partials使用了别的模块注册的Helper, 且这个Helper没有在handlebars-layouts之前先注册, 更改下顺序吧, 比如handlebars-helpers和handlebars-layouts的顺序:
1. handlebars-helpers: 提供基础的Helper
2. handlebars-layouts: 提供布局的Helper
handlebars-helpers
这个是各类Handlerbars的Helper集合, 涵盖了全部可能用到的Helper, 不需要自己再实现一遍. 具体内容参考这里.
More than 130 Handlebars helpers in ~20 categories.
安装
var hbs = require('hbs')
var helpers = require('handlebars-helpers')
helpers({handlebars: hbs})
问题点
1. 按照handlebars-helpers文档安装, Helper未成功注册
因为这个插件是自动做registerHelper注册的, 需要使用hbs的registerHelper的方法完成注册, 但是插件默认是使用handlebars, 因此需要手动传入hbs对象:
var helpers = require('handlebars-helpers')
helpers({handlebars: hbs})
可以通过下面的方法查看是否成功注册了Helper:
console.log(Object.keys(hbs.handlebars.helpers))
hbs-utils
这个工具是在开发时为hbs提供Partials注册及watch的功能.
安装
var hbs = require('hbs')
var hbsutils = require('hbs-utils')(hbs)
hbsutils.registerWatchedPartials(config.viewsPath, {
onchange () {
// Partials has changed!
console.log(`Partials has changed!`)
}
}, function () {
// The initial registration of partials is complete.
console.log(`The initial registration of partials is complete`)
})
问题点
1. 和hbs提供的registerPartials之间的区别
主要是提供了precompile的功能, 默认是关闭的的. 另外, 提供name属性来修改Partials的注册名称.
2. registerWatchedPartials之前需要registerPartials吗?
不需要, 因为registerWatchedPartials会自己按照给定的目录先注册Partials, 之后再watch.
3. 如何开启开发模式
提前设好模式, 根据下面的判断开启
if (process.env.NODE_ENV === 'development') {
...
} else {
...
}
总结
以上是我在使用hbs时的最佳时间和插件组合, 希望能对你有用.