Underscore.jsのtemplate触ったメモ

Underscore.jsのtemplate

以下、Underscore.jsが1.3.3当時の情報です。

template _.template(templateString, [data], [settings]) Underscore.js Utility template

Backbone.jsを試すついでに、Underscore.jsについてるtemplateを試してみました。他のテンプレートライブラリ持ち込んでくるのも億劫だったので。

<script id="tmplString" type="text/template">
  <h3>店舗情報</h3>
  <div id="store">
    <p><a href="<%- data.store.url %>"><%- data.store.name %></a></p>
    <img src="<%- data.store.image %>" alt="店舗写真" />
    <dl>
      <dt>〒</dt>
        <dd><%- data.store.zip %></dd>
      <dt>住所</dt>
        <dd><%- data.store.address %></dd>
      <dt>電話番号</dt>
        <dd><%- data.store.tel %></dd>
    </p>
  </div>

  <h3>スタッフ情報</h3>
  <div id="staffs">
    <ul>
      <% _.each(data.staffs, function(who) { %>
      <% if (!who.description) { return; } %>
      <li>
        <a href="<%- who.url %>"><img src="<%- who.image %>" alt="スタッフ写真" /></a>
        <p><%- who.description %></p>
      </li>
      <% }); %>
    </ul>
  </div>
</script>

こんな文字列を適当に用意してvar compiled = _.template(tmplString);とすれば、コンパイル済みのテンプレート関数が作られるのでvar output = compiled({data: なにか})で処理させて出来上がり。普通ですね。

構文の種類

評価部 evaluate（<% ... %>）

普通にJavaScriptとして評価させる部位に使います。手軽ですけど、この評価部で何とかする系は、ノンエンジニアに易しくないので普段の業務だと使いづらいかも。

<% _.each(collection, function(row) { %>とかになります。

変数挿入 interpolate（<%= ... %>）

変数を単品で書き込むと、テンプレートのそこに出力されます。この書き方だとエスケープされずに生々しい値が出力されるので注意が必要です。

わたしのなまえは<%= row.name %>です。とか。文字列連結ですね。

エスケープ挿入 escape（<%- ... %>）

変数挿入と使い方は同じですが、こちらはエスケープされます。エスケープ用の関数には、_.escapeが使われています。

// Escape a string for HTML interpolation.
_.escape = function(string) {
  return (''+string).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g,'&#x2F;');
};

テンプレート構文の変更（正規表現の差し替え）

ERBライクな構文が気にくわなければ、_.templateSettingsで、正規表現を上書きしてあげれば変更もOKです。下記は本家のサンプルコードから拝借しています。

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

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

種類は前項で紹介した、evaluate・ interpolate・escapeの3種類で、デフォルトは下記のようになっています。

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

---