HsbtDiary

■ [javascript][template] javascript で使えるテンプレートライブラリ

最近は Rails 3.1 と backbone.js でガリガリ CoffeeScript を使ってみょんみょん動くWebアプリケーションを書いているんですが、backbone.js のビューで使っているテンプレートライブラリとかその周辺を紹介。

javascript でテンプレートと言っても基本的に erb や haml と同じで埋め込み javascript をどう書くかという部分と html のタグをどう書くかという部分で何らかの選択をすることになる。

underscore.js の template

backbone.js を使うならとりあえずこれを使うことになる。

_.template '''
  <div><%= foo %></div>
'''

という感じ。とっても erb っぽいけど、foo の部分は javascriptとして解釈される。だいたいこういうテンプレートを用意したら

$(@el).html @template(@model.toJSON())

みたいにして、this.model の foo プロパティの値を埋め込んだりする

haml-js

haml の js 版らしい。CoffeeScript の中に直接書くとインデント的な意味で破滅するので軽く触って使うのをやめてしまった。jammit とかその辺の仕組みを使ってテンプレートを完全分離するなら使い勝手はよくなるのかなあ。

mustache.js

mustache.js は埋め込みに使う記法が

Mustache.to_html '''
  <div>{{foo}}</div>
'''

という感じで underscore.js template よりも簡単にかける。だいぶ好きな記法。他にも

Handlebars.compile '''
  <div>{{#visible}}{{foo}}{{/visible}}{{^visible}}None{{/visible}}</div>
'''

という感じに値を用いて表示を切り替えたり、Arrayを渡して展開表記することもできる。便利。

Handlebars.js

Handlebars.js は Mustache をだいぶ拡張した記法で今のプロジェクトではこれを主に使っている。

が、拡張部分はまだ使っていないことに気がついたので、勉強したら書いておきます!