Hogan.jsの使い方
ExpressのテンプレートエンジンHogan.jsの使い方です。
テンプレートエンジンを使用すると、静的なテンプレートファイルの変数を実際の値に置き換え、クライアントへ送信できます。
Hogan.jsのインストール
使い方
サーバサイド(抜粋)
viewsディレクトリにテンプレートファイルを置く場合。
'views'
はテンプレートファイルが置かれているディレクトリです。
記述しない場合はアプリケーションのルートディレクトリ内のviewsディレクトリになります。
response.render()
がレンダリングメソッドです。第2引数がオプションのパラメータになります。
クライアントサイド
書式
変数の内容を出力
変数の内容をHTMLエスケープせずに出力
コメント
先頭に!
を付けます。
ループ
次のように記述します。
{{}}
の中はスペース無しにします。
サンプル
サーバサイド
クライアントサイド
クライアントの表示

分岐
分岐の記述例を以下に記載します。condition
やvariable
は判定する変数名です。
{{}}
の中はスペース無しにします。
変数が true の場合に処理を行う
変数が false の場合に処理を行う
変数がbool以外で値が入っている場合に処理を行う
Partials
Partialsは別ファイルの内容をテンプレートに埋め込む場合に使用します。Partialsによって各テンプレートで共通な部分を別ファイルにできます。
サーバサイド
ここで、'user-menu'
は.hjsファイル名です。
クライアントサイド
>
で埋め込むファイルを指定します。
上記では、テンプレートファイルの{{> menu }}
の位置にuser-menu.hjs
の内容が挿入されます。
user-menu.hjs
ではサーバサイドで'template'
に渡された変数も参照可能です。
scriptタグ内での使用
scriptタグ内でも同じ記述で利用できます。
ただし、ループ内で変数の定義はできません。(多重定義になる)