Node.js的+快速+ Handlebars.js +局部视图(Node.js + Express

2019-09-02 00:07发布

我试图与Node.js的一个简单的HelloWorld项目|使用Handlebars.js作为服务器模板引擎快速。

问题是,我无法找到使用这种链,尤其是与多个视图的任何实例。

例如,我想定义头视图:

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

并与其他意见每一页都用它。

也许我想在一个错误的方式对此的看法,我认为的观点是那种我可以在任何网页上重用任何其他视图中的控制。

我明白任何链接教程或(更好的),我可以从李尔的开源项目。

Answer 1:

我知道这已经问了很久以前的事,但没有一个人表现出在这个岗位的答案。 因此,我将在这里完成。 为了确保每个人都在同一页上,我会在我的答案详细。 我提前道歉,如果它似乎过于简单化。

在您的server.js文件(或app.js,无论你定义为车把您的视图引擎)。 根据你所使用作为您的NPM包,如HBS或表达车把等,它可能看起来不同,但与此类似。 注:我使用的快递车把在这个例子中。

文件: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 }}



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的实施“车把快车”,并发现它是优秀的:

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

要记住的重要一点是,在快递,如在浏览器内反对,车把被认为在启动呈现阶段。 客户端代码最终会被只是普通的HTML,因为如果你想一个PHP环境中使用的小胡子。



Answer 4:

您需要使用谐音。

见https://github.com/donpark/hbs/tree/master/examples/partial使用泛音的一个很好的例子。

再举一例http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers



文章来源: Node.js + Express + Handlebars.js + partial views