読者です 読者をやめる 読者になる 読者になる

Express3系において部分テンプレートを実現する、express-partialsの使い方

Node.js Express

Express2系ではデフォルトで部分テンプレートをサポートしていたようですが、Express3系ではサポートされなくなったようです。
しかし、やはり部分テンプレートは使いたいという場合は、express-partialsというモジュールで実現可能です。

以下、インストールと簡単な使い方を説明します。

1. インストール

npm install express-partials --save

npm installコマンドでインストールします。--saveはお好みで。

2. app.jsのセッティング

var partials = require('express-partials'); // requireしてあげる。
・・・
app.use(partials()); // app.useしてあげる。

上記だけであとはview側の実装で部分テンプレートが使えるようになります。

3. viewの準備

index.ejs

<html>
  <head>
    <title>ejsの場合の例</title>
  </head>
  <body>
    <span>ほげ</span>
    <%- partial('part_contents') %>
    <span>ふが</span>
  </body>
</html>

部分テンプレートを呼び出す親側のview。
「<%- %>」としているのは、htmlをエスケープさせたくないため。「<% %>」とするとhtmlがエスケープされて部分テンプレートとして機能しない。

part_contents.ejs

<div>
  <span>コンテンツ。</span>
</div>

部分テンプレートのview。

4. 実行

ほげ
コンテンツ。
ふが

こうなるはず。

補足

部分テンプレート内でres.renderにおいて設定したオブジェクトを参照したい場合、以下のようにします。
app.js

・・・
res.render('index', {contentObj: {hoge: 'ほげほげ'}});
・・・

index.ejs

<span>ほげ</span>
<%- partial('part_contents', contentObj) %>
<span>ふが</span>

part_contents.ejs

<div>
  <span><%= hoge %></span>
</div>

おすすめ参考文献

Node.js+Expressの構成の使い方を解説してくれます。初めてNode.jsやExpressに取り組む方にオススメです。