Question

我正在尝试使用Handlebars.js作为服务器模板引擎，使用Node.js | Express创建一个简单的HelloWorld项目。

问题在于我无法找到使用此类链的任何示例，尤其是多视图。

例如，我想定义标题视图：

<header>
  <span>Hello: {{username}}</span>
</header>

并在包含其他视图的每个页面中使用它。

也许我正在以错误的方式思考这些观点，我认为该观点是一种控制，我可以在任何其他视图中的任何页面上重复使用。

我感谢任何可以从中学习的教程或（更好）开源项目的链接。

Answer 1

我知道很久以前就已经问过了这个问题，但没有人在这篇文章中找到答案。所以我会在这里这样做。为了确保每个人都在同一页面上，我的答案将会冗长。如果它看起来过于简单，我会提前道歉。

在您的server.js文件（或app.js中，无论您将把手定义为视图引擎的位置）。根据您使用的npm包装，例如hbs或快速把手等，它可能看起来不同，但与此类似。注意：我在这个例子中使用快速把手。

file：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文件应如下所示：

file：main.hbs

...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}

要表示部分使用此语法：{{> partialsNames }}。

Answer 2

使用https://www.npmjs.org/package/hbs | https://github.com/donpark/hbs

我们假设你有：

+ views
  - index.hbs
  + partials
    - footer.hbs

您需要注册哪个文件夹包含您的部分内容：

hbs.registerPartials(__dirname + '/views/partials');

部分将具有文件的确切名称。您还可以使用以下命令为部分注册特定名称：

hbs.registerPartial('myFooter', fs.readFileSync(__dirname + '/views/partials/footer.hbs', 'utf8'));

然后你这样访问它：

First example: {{> footer }} 
Second example: {{> myFooter }}

此处的完整示例：https://github.com/donpark/hbs/tree/master/examples/partial

Answer 3

我目前正在使用ericf实施的“Handlebars-express”，并发现它非常出色：

https://github.com/ericf/express3-handlebars

要记住的关键是，在快递上，与浏览器内部相反，把手在视图渲染阶段被激活。客户端代码最终只是纯HTML，就好像你在PHP上下文中使用了胡子一样。

Answer 4

你需要使用部分内容。

有关使用partials的一个好例子，请参阅https://github.com/donpark/hbs/tree/master/examples/partial。

这是另一个例子http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Answer 5

如果您当前的目录是这样的，

| /public/   
| /views/ 
|--- /layouts/
|----- main.hbs 
|--- /partials/ 
|----- header.hbs 
|----- footer.hbs 
|----- sidebar.hbs 
|--- index.hbs 
| app.js

然后，app.js的结构将为

const express = require('express');
const app = express();
const port = 3001;
const path = require('path');
const handlebars = require('express-handlebars');

app.use(express.static(path.join(__dirname, 'public'))); 

app.set('view engine', '.hbs');
app.engine('.hbs', handlebars({
    layoutsDir: __dirname + '/public/views/layouts',
    defaultLayout: 'main',
    extname: 'hbs', 
    //for partial directory
    partialsDir : __dirname+'/public/views/partials',
}));

app.set('views', path.join(__dirname, '/public/views'));

app.get('/', (req, res) => {  
    res.render('index');
});

app.listen(port, () => console.log(`App listening to port ${port}`));

按如下所示设置main.hbs

const express = require('express');
{{> header}}
{{> sidebar}}
<p>Your Content(static) or you can use {{{body}}} </p>
{{> footer}}

Node.js + Express + Handlebars.js +部分视图

5 个答案: