Handlebars.jsを手軽に使えるjQueryプラグイン書いた

最近巷で話題になっている(？)JavaScript製のテンプレートエンジン「Handlebars.js」。

簡単にテンプレートを作成でき、テンプレートも見やすく、IE6でも使用できるので個人的にはもの凄い重宝しています。

使い方はざっくり言うと以下のとおり。

• テンプレートを作成
• JSONを読み込む
• JSONの内容をテンプレートに適用させる

これだけです。
詳しい使用方法等は以下のページを見ていただけると良いかもです。

• Handlebars.jsの基本的な使い方のメモ - console.lealog();
• CodeGrid（※有料ですが、とても詳しく載っているのでお勧めです）

で、本題です。

先日Handlebars.jsを使用して複数のJSONを読み込み、複数のテンプレートを使用して表示させる案件があったんです。
その時にJSONを読み込んで、テンプレートを適用させるコードを何回も書くのが面倒だったのでjQueryプラグインにしてみました。
それが「compilehandlebarstmpl.js」です。

基本的な使い方は以下のとおり。

まず、テンプレートと出力する要素を用意します。

<!-- 出力する要素 -->
<div id="hoge">

<!-- テンプレート -->
<script id="tmpl" type="text/x-handlebars-template">
{{#each fuga}}
<div<{{foo}}</div>
{{/each}}
</script>

次に「Handlebars.js」、「jQuery.js」、「compilehandlebarstmpl.js」を読み込んで実行します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/jquery.compilehandlebarstmpl.js"></script>
<script>
$(function() {
    $('#hoge').compileHandlebarsTmple({
        jsonURL: '', //読み込むJSONファイルのURL
        tmplSrc: '#tmpl' //テンプレートのID
    });
});
</script>

これで「jsonURL」に記述したJSONを読み込み、「tmplSrc」のテンプレートに当てはめて「#hoge」に出力します。
普通に書いても簡単ですが、より簡単に書けるようになったのではないでしょうか。
ここには書いていませんが、registerHelperも登録することが可能です。

デモページを用意していますので、詳しいことはご確認下さい。

• 基本的な使い方
• registerHelperを登録して使用

今後はregisterPartialも登録できる様に出来ればなーと考えています。

2014.06.11追記

プラグインを書き直し、Githubにアップしました。
必要であればお使いください...！

jquery.compilehandlebars.js