テンプレートのプリコンパイル

Handlebarsのバージョンを最新の1.3.0にしたところいくつかプリコンパイル周りの動作が変わっていて対応が必要だったのでメモ。

インストール

npmでそのままhandlebarsをインストールしようとすると2.0-alphaがインストールされてしまい、実行時エラーになるので1.3.0を明示的にインストールする。

$ sudo npm install -g handlebars@1.3.0

コンパイル

sample.handlebarsというテンプレートをコンパイルする場合は以下のようにする

$ handlebars sample.handlebars

以前は拡張子が".handlebars"以外でも問題なかった気がするが、今は明示しないとコンパイルしてくれない。

#sample.hbというファイル名の場合。以下の出力が出て失敗する。
$ handlebars sample.hb
(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
})();

素直に拡張子を変えた方がよいが、オプションで拡張子を明示することもできる。

$ handlebars sample.hb -e 'hb'

出力先の指定やらミニマイズをつけておく

$ handlebars sample.hb -e 'hb' -m -o hb_sample.js

Scriptの読み込み

コンパイルしたテンプレートとhandlebars.runtimeを読み込む

<script type="text/javascript" charset="UTF-8" src="/js/hb_sample.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/handlebars.runtime-v1.3.0.js"></script>

実行

コンパイル時に使用したテンプレートファイル名から拡張子を除いたものがテンプレート名になる。以前は拡張子まで必要だったが現在は不要になっている。

var obj = Handlebars.templates.sample(response);
または
var obj = Handlebars.templates['sample'](response);