web-dev-qa-db-ja.com

Node.js + Express + Handlebars.js +部分ビュー

サーバーテンプレートエンジンとしてHandlebars.jsを使用して、Node.js | Expressで簡単なHelloWorldプロジェクトを作成しようとしています。

問題は、特に複数のビューで、そのようなチェーンを使用する例が見つからなかったことです。

たとえば、ヘッダービューを定義したいと思います。

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

そして、他のビューを持つすべてのページで使用します。

このビューについて間違った方法で考えているのかもしれません。ビューは、他のビュー内の任意のページで再利用できるコントロールの一種だと思いました。

チュートリアルまたは（はるかに優れた）オープンソースプロジェクトへのリンクをいただければ幸いです。

node.jsexpresshandlebars.jspartial-views
37
Artem Yarulin

これはかなり前に質問されていたことを知っていますが、この投稿では誰も答えを示していません。だから私はここでそうします。全員が同じページにいることを確認するために、回答の詳細を説明します。過度に単純化されていると思われる場合は、事前に謝罪します。

Server.jsファイル（またはapp.js、ビューバーとしてハンドルバーを定義した場所）。 hbsやexpress-handlebarsなど、npmパッケージとして使用しているものに応じて、外観は異なりますが、これに似ています。注：この例では、エクスプレスハンドルバーを使用しています。

ファイル：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 }}。

49
Tristan Isfeld

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

37
fmsf

私は現在、ericfの「handlebars-express」の実装を使用していますが、優れていることがわかりました。

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

覚えておくべき重要なことは、ブラウザ内とは対照的に、エクスプレスでは、ビューのレンダリング段階でハンドルバーがアクティブになることです。 PHPコンテキスト内で口ひげを使用したかのように、クライアントコードは単なるHTMLになります。

3
Andrew Waterman

パーシャルを使用する必要があります。

パーシャルを使用する良い例については、 https://github.com/donpark/hbs/tree/master/examples/partial をご覧ください。

ここに別の例があります http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

1
Troy