【Rails】Underscore.jsとRailsを組み合わせる時に気をつけたいこと

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

Underscore.js(以下Underscore)って便利ですよね。配列やオブジェクトを操作する時に何かと使います。
今日はUnderscoreとRailsアプリを一緒に使うときのお話です。

Underscore.jsのtemplate()

Underscoreにはテンプレートエンジンが備わっています。
JSONからDOMを生成したい時など、Javascriptのコードの中にhtmlを書くことなく、生成するhtmlコードをViewとして切り離してすっきり簡潔に書くことが出来ます。
Backbone.jsなどでも使用する機会は多く、ものすごく重宝しています。

記法の問題

ただ、Railsと組み合わせて使う場合は気をつけなければいけない点があります。
テンプレートの変数出力の記法がERBのそれと変わらないので、そのままの記法ではRailsで参照エラーになってしまうのです。

htmlに埋め込む場合

<script type="text/template" id="TemplateList">
    <li class="item">
        <a href="<%= link %>">
            <h3 class="name"><%= name %></h3>
            <p class="description"><%= text %></p>
            <code><%- html %></code>
        </a>
    </li>
</script>

RailsのView.html.erbの場合(エラーになる)

<%= yield %>

<script type="text/template" id="TemplateList">
    <li class="item">
        <a href="<%= link %>"> # NG
            <h3 class="name"><%= name %></h3> # NG
            <p class="description"><%= text %></p> # NG
            <code><%- html %></code> # NG
        </a>
    </li>
</script>

解決策(正規表現で置換)

幸い、Underscoreでは_.templateSettingsプロパティに正規表現を指定することで記法を変更することが可能です。
これ作った人、すごく頭良くないですか?
http://underscorejs.org/#template

デフォルトでは以下の設定になっています。

_.templateSettings = {
  evaluate    : /<%([\s\S]+?)%>/g,
  interpolate : /<%=([\s\S]+?)%>/g,
  escape      : /<%-([\s\S]+?)%>/g
};

公式のドキュメントの例では、Mustache, Handlebarsの記法に変えることも出来ます。

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({ name: "Mustache" });
=> "Hello Mustache!"

そこで、以下の様に変更することで<% %>{{ }}に置き換えることができます。

_.templateSettings = {
  evaluate: /\{\{(.+?)\}\}/g,
  interpolate : /\{\{=(.+?)\}\}/g,
  escape : /\{\{-(.+?)\}\}/g
};

これでRailsでエラーにならなくなります。

Underscoreの方がMustacheやHandlebarsとは違い、ツールベルトとして汎用性があって取り回しがしやすいという点で使いやすいですね。
また、Lo-dashの方もオススメです。

参考サイト

undefined local variables in templates


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。