什么是egg-view-hbs2
egg-view-hbs2是Egg.js提高的一个视图渲染器，使用了Handlebars模板引擎。
相比于Egg.js原生的模板引擎nunjucks，Handlebars模板引擎有以下几个优点：
- 语法简洁易懂
- 支持复杂数据结构渲染
- 支持自定义helper函数
因此，egg-view-hbs2能够更好地满足视图渲染的需要。
安装
在创建Egg.js项目时，可以选择使用egg-view-hbs2作为默认的模板引擎，命令如下：
$ npm i egg-view-hbs2 -S
配置
- 启用插件
在config/plugin.js文件中启用egg-view-hbs2插件：
module.exports = {
view: {
enable: true,
package: 'egg-view-hbs2'
}
}- 配置模板引擎
在config/config.default.js文件中配置egg-view-hbs2的模板引擎：
-- -------------------- ---- -------
-------------- - ------- -- -
----- ------ - ------- - ---
-- ---------------
----------- - -
------------------ ------
-------- -
------- -----
--
--
------ -------
--使用
创建一个名为view.hbs的Handlebars模板文件，在Controller中进行渲染。
- 渲染一个数据对象
-- -------------------- ---- -------
----- -------------- ------- ---------- -
----- ------- -
----- - --- - - -----
----- ---- - -
----- --------
---- --
--
----- ------------------ - ---- ---
-
-在view.hbs中使用{{user.name}}和{{user.age}}来渲染即可。
- 渲染多条数据
-- -------------------- ---- -------
----- -------------- ------- ---------- -
----- ------- -
----- - --- - - -----
----- ----- - -
-
----- --------
---- --
--
-
----- ------
---- --
-
--
----- ------------------ - ----- ---
-
-在view.hbs中使用Handlebars的each helper函数来渲染：
{{#each users}}
<p>{{name}} - {{age}}</p>
{{/each}}- 自定义helper函数
在config/config.default.js中定义helper函数：
-- -------------------- ---- -------
-------------- - ------- -- -
----- ------ - ------- - ---
-- ---------------
----------- - -
------------------ ------
-------- -
------- -----
--
----------------- -------
-- ----------
-------- -
-------------- -
-- ---- - --- -
------ ------
- ---- -
------ -----
-
-
-
--
------ -------
--在view.hbs中使用自定义helper函数：
{{#each users}}
<p>{{name}} - {{formatAge age}}</p>
{{/each}}以上就是使用egg-view-hbs2的基本教程，希望对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244d90