Jump to the content

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

JavaScript, Ruby

    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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×