2013-03-04

Backbone.jsとHandlebars.jsを組み合わせる

Backbone.jsでアプリケーションを作る場合、ついつい手軽さを求めてUnderscore.jsのtemplate()を使うことが多いのですが、少し凝った造りのページを作る場合、より専門的なテンプレートエンジンを使いたくなります。

そこで今回は、最近マイブームのHandlebars.jsをBackboneと組み合わせて使ってみました。

このエントリでお伝えしたいこと。

  1. Backbone.js with Handlebars.js!!
  2. ここでもやっぱりGrunt最高

Handlebars.jsとは

詳細はGoogle先生の方が詳しいです(ごめんなさい)。
数あるクライアントサイドのテンプレートエンジンの1つです。個人的にはプリコンパイルすることでパフォーマンス的に優位なところを注目しています。

[jsperf]Precompiled Templates

最近話題のtwitterのHorgan.jsともいい感じに渡り合ってます。

とは言っても、プリコンパイル前は激遅なんですが。。。

アプリケーション構成

まず、アプリケーションの構成は次のようなものだと仮定して話を進めます。

namespace.js

なにはともあれ最初はGrunt!!

まず、なにか新しいことを始めるためには準備と計画が大事です。
特にHandlebars.jsの場合は、プリコンパイルしない事には使い物にならないので、ビルドプロセスが必須です。
ということでGruntのタスクを使います。

grunt-contrib-handlebars

Gruntfile.jsは次のように書きます。

普段Grunt使っている人だったら、さっと見ただけで分かると思うので、compileオプションの大事な所だけ補足します。

namespace

プリコンパイルされたテンプレート関数が割り当てられます。デフォルトだとJSTとなるので必要な場合、設定してください。

processName

processNameとは、(上の)namespaseオブジェクトに格納された、プリコンパイル済みテンプレート関数を取り出すためのキーです。デフォルトではファイルパスが設定されるようになっており、次のように取り出すようになっています。var tmpl = MyApp.Templates["app/hbs/partial.hbs"];
個人的にはvar tmpl = MyApp.Templates.partial;とbackbone側から利用したいので、overrideしています。

これでGruntのwatchタスクと組み合わせることで、hbsファイルに変更があった際にtemplate.jsとして自動でプリコンパルされます。Gruntってほんと便利!

Backboneと使う

さて本題です。
今回は、Backboneでありがちな、render()でCollectionの中身を出力する場合を例に説明します。

まずは、Handlebars.jsのテンプレート部分

BackboneのViewからは次のように呼び出します。

Handlebars.jsのテンプレート関数にデータを渡す際に、1回オブジェクトにラップして名前を付ける手間がありますが、これでBackboneでHandlebars.jsを使うことができました。
Handlebars.jsには他にも色々なExpressionsがあるのですが、同じ原理で大丈夫なはずです。