节点。js + Express +把手。js +局部视图

I am trying to make a simple HelloWorld project with Node.js|Express using Handlebars.js as a server template engine.

我正在尝试用Node做一个简单的HelloWorld项目。js |使用车把表达。js作为服务器模板引擎。

The problem is that I couldn't find any examples of using such chain, especially with multiple view.

问题是，我找不到使用这种链的任何例子，尤其是在多视图的情况下。

For example I would like to define header view:

例如，我想定义header视图:

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

And use it in every page with other views.

并在每个页面中与其他视图一起使用它。

Maybe I am thinking about this views in a wrong way, I thought that view is kind of control that I can reuse on any page inside any other view.

也许我用错误的方式考虑这个视图，我认为视图是一种可以在任何其他视图的任何页面上重用的控件。

I appreciate any link to the tutorial or (much better) open source project that I can lear from.

我很欣赏教程或(更好的)开源项目的任何链接。

4 个解决方案

#1

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

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

Let's assume you have:

假设你有:

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

You need to register which folder contains your partials:

您需要注册哪个文件夹包含您的部分:

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

The partials will have the exact name that the file has. You can also register specific names for your partials by using:

部分将具有文件的确切名称。你亦可使用以下方法，为你的部份登记特定名称:

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

Then you access it like this:

然后你可以这样访问它:

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

Full example here: https://github.com/donpark/hbs/tree/master/examples/partial

完整的例子:https://github.com/donpark/hbs/tree/master/examples/partial

#2

I know this had been asked a long time ago, but no one has shown an answer in this post. So I will do so here. To ensure everyone is on the same page, I will be verbose in my answer. I apologize in advance if it seems overly simplistic.

我知道这个问题已经问了很久了，但是没有人在这篇文章中给出答案。我在这里写一下。为了确保每个人都在同一个页面上，我的回答会很罗嗦。如果这看起来过于简单，我提前道歉。

In your server.js file (or app.js, wherever you defined handlebars as your view engine). Depending on what you are using as your npm package, such as hbs or express-handlebars etc. it may look different, but similar to this. Note: I'm using express-handlebars in this example.

在你的服务器。js文件(或app.js，无论您在哪里定义handlebars作为您的视图引擎)。根据你使用的npm包(如hbs或express-handlebars等)，它可能看起来不同，但与此类似。注意:我在这个例子中使用了expresshandlebars。

file: server.js

文件: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' );

...

and your file structure should look something like this:

你的文件结构应该是这样的:

| /views/   
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js

And your main.hbs file should look like this:

和你的主。hbs文件应该是这样的:

file: main.hbs

文件:main.hbs

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

To denote a partial you use this syntax: {{> partialsNames }}.

要表示部分，可以使用以下语法:{{> partialsNames}。

#3

I'm currently using ericf's implementation of "handlebars-express", and find it to be excellent:

我目前正在使用ericf执行的“handlebars-express”，发现非常出色:

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

The key thing to remember is that on express, as opposed to the within the browser, handlebars gets activated during the view render phase. The client code will end up being just plain HTML, as if you'd used mustache within a PHP context.

关键要记住的是，与浏览器内部不同，在express上，handlebars在视图呈现阶段被激活。客户机代码最终会变成纯HTML，就像在PHP上下文中使用mustache一样。

#4

You need to use partials.

你需要使用偏置。

See https://github.com/donpark/hbs/tree/master/examples/partial for a good example of using partials.

请参阅https://github.com/donpark/hbs/tree/master/examples/partial，以获得一个使用部分的好例子。

Here's another example http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

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

#1