我正在尝试使用 Node.js|Express 使用 Handlebars.js 作为服务器模板引擎制作一个简单的 HelloWorld 项目。
问题是我找不到任何使用这种链的例子,尤其是多 View 。
例如我想定义标题 View :
<header>
<span>Hello: {{username}}</span>
</header>
并在具有其他 View 的每个页面中使用它。
也许我以错误的方式考虑这些 View ,我认为该 View 是一种可以在任何其他 View 内的任何页面上重复使用的控件。
感谢任何指向教程或(更好的)我可以从中学习的开源项目的链接。
最佳答案
我知道很久以前就有人问过这个问题,但没有人在这篇文章中给出答案。所以我会在这里这样做。为了确保每个人都在同一页面上,我的回答会很冗长。如果它看起来过于简单,我提前道歉。
在您的 server.js 文件(或 app.js,您将 Handlebars 定义为 View 引擎的任何位置)中。根据您使用的 npm 包,例如 hbs 或 express-handlebars 等,它可能看起来不同,但与此类似。注意:在这个例子中我使用的是 express-handlebars。
文件:server.js
...
var express = require( 'express'),
hbs = require( 'express-handlebars' ),
app = express();
...
app.engine( 'hbs', hbs( {
extname: 'hbs',
defaultLayout: 'main',
layoutsDir: __dirname + '/views/layouts/',
partialsDir: __dirname + '/views/partials/'
} ) );
app.set( 'view engine', 'hbs' );
...
你的文件结构应该是这样的:
| /views/
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js
您的 main.hbs 文件应如下所示:
文件:main.hbs
...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}
要表示部分,请使用以下语法:{{> partialsNames }}
。
关于Node.js + Express + Handlebars.js + 局部 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16385173/