Node.js + Express + Handlebars.js +局部視圖

Question

我想用Node.js | Express使用Handlebars.js作爲服務器模板引擎來製作一個簡單的HelloWorld項目。

問題是，我找不到任何使用這樣的鏈的例子，特別是與多視圖。

比如我想定義標題視圖：

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

，並與其他意見每一頁都用它。

也許我正在以一種錯誤的方式思考這個觀點，我認爲這種觀點是一種控制，我可以在任何其他視圖內的任何頁面上重複使用。

我欣賞任何指向我可以學習的教程或（更好）開源項目的鏈接。

Answer 1

我目前使用ericf的實施「車把快車」，並發現它是優秀的：

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

需要記住的重要一點是，在快遞，如內反對瀏覽器，在視圖渲染階段，handlebars被激活。客戶端代碼最終只會成爲純HTML，就像在PHP上下文中使用鬍子一樣。

Answer 2

您需要使用偏分量。

查看https://github.com/donpark/hbs/tree/master/examples/partial瞭解使用偏分量的一個很好的例子。

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

Answer 3

使用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')); 

那麼你訪問它是這樣的：

這裏

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

Answer 4

我知道這已經被問了一個很長前一段時間，但沒有人在這篇文章中顯示出答案。所以我會在這裏做。爲了確保每個人都在同一頁面上，我會在我的答案中詳細說明。如果看起來過於簡單，我會提前道歉。

在您的server.js文件（或app.js，無論您將handlebars定義爲視圖引擎的位置）中。根據您使用的npm包，如hbs或express-handlebars等，它可能看起來不同，但與此類似。注意：在這個例子中我使用了express-handlebars。

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文件應該是這樣的：

文件：main.hbs

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

爲了表示部分你使用此語法：{{> partialsNames }}。