Rails で JavaScript テンプレートの Hogan.js を使う

Rails JavaScript

はじめに

JavaScript テンプレートには backbone-rails がデフォルトでサポートしている EJS を使っていたけど、 backbone-rails 使うのやめたから EJS をあえて使う理由が無くなった。

自分の観測範囲内だと、JavaScript テンプレートでは Hogan.js と Handlebars の情報が目にすることが多かったので、 Rails で使っている JavaScript テンプレートを Hogan.js で書き換えることにした。

HoganAssets の導入

HoganAssets という gem を使うと、 Rails のアセットパイプラインで Hogan.js のテンプレートをコンパイルできるようになる。

Gemfile に次の行を追加し、bundle でインストールする。

gem "hogan_assets"

config/initializers/hogan_assets.rb を作成し、

HoganAssets::Config.configure do |config|
  config.path_prefix = "app/assets/javascripts"
end

を記述。 上記の設定で、例えばテンプレートの場所が

app/assets/javascripts/backbone/templates/tasks/task.mustache

にあるとき、JavaScript からは

HoganTemplates["backbone/templstes/tasks/task"]

でアクセスできるようになる。

あとは app/assets/javascripts/application.js に次の1行を追加。

//= require hogan.js

これで Hogan.js を使う準備は終了。

テンプレートとビューの修正

Hogan.js のテンプレートは拡張子 .mustache (例：list.mustache)。

<td>
  <input name="selected"
       type="checkbox"
       {{#selected}}checked{{/selected}}/>
</td>
<td>
  {{#completed}}<del>{{/completed}}
  <a href="#/tasks/{{id}}">{{name}}</a>
  {{#completed}}</del>{{/completed}}
</td>
<td>
  <a href="#tasks/{{id}}/edit">
    <i class="icon-pencil"></i>
  </a>
  <a class="delete-task" href="#">
    <i class="icon-remove"></i>
  </a>
</td>

JavaScript/CoffeeScript では、 HoganTemplates というオブジェクトからコンパイルされたテンプレートを取得できる。

# タスクを表示するビューを表します。 
class TaskView extends Backbone.View
  tagName: "tr"
  
  template: HoganTemplates["backbone/templates/tasks/task"]
  
  # ビューを描画します。 
  render: =>
    ctx = @model.toJSON()
    html = @template.render(ctx)
    @$el.html(html)
    return @

まとめ

HoganAssets を導入することで、Rails のアセットパイプラインで Hogan.js のテンプレートをコンパイルできるようになった。 Hogan.js でテンプレートを書き変えている最中だけど、今のところ EJS と比べテンプレートはスッキリしている。

テンプレートにロジックは書くべきじゃないのについ書いてしまう、自分みたいな人間にはうってつけだな。