Handlebars.jsを手軽に使えるjQueryプラグイン書いた
最近巷で話題になっている(?)JavaScript製のテンプレートエンジン「Handlebars.js」。
簡単にテンプレートを作成でき、テンプレートも見やすく、IE6でも使用できるので個人的にはもの凄い重宝しています。
使い方はざっくり言うと以下のとおり。
これだけです。
詳しい使用方法等は以下のページを見ていただけると良いかもです。
- 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も登録することが可能です。
デモページを用意していますので、詳しいことはご確認下さい。
今後はregisterPartialも登録できる様に出来ればなーと考えています。
2014.06.11追記