, ,

[Front-End General] Underscore.js のテンプレートエンジンを利用する

公開日: 2016/10/05
更新日: 2018/12/26

レイアウトとロジックを分離する。

  • jQuery 3.1.0
  • underscore.js 1.8.3

こちらとの比較。

Underscore.js を利用したサンプル

Underscore.js を利用して、レイアウトとロジックを分離する。

JavaScript では、テンプレートの id に対して _.template を利用する。

    .done((data) => {
      $('#comment').empty();
      $('#count').text(data.count + '件');
      const compiled = _.template($('#bm').text());
      for (let bookmark of data.bookmarks) {
        if (bookmark.comment) {
          $('#comment').append(compiled({
            timestamp: bookmark.timestamp,
            comment: bookmark.comment
          }))
        }
      }
    })

HTML テンプレート側に表示系を <% を利用して書く。
<%- でエスケープして出力。
ERB と同じなので個人的には分かりやすい。

<script id="bm" type="text/x-underscore">
  <li><%- timestamp %>: <%- comment %></li>
</script>

if や for も利用できるが、view template に持っていくと <% _.each() などを書かなければいけないので、可読性や分業を考えると問題がありそう。

view template にロジックを持ちたくないので、これでいいのかも知れない。

script type 属性について

MIME Type に沿って指定するとのこと。

標準化されている訳ではないので、x- で始める適当な名前を付ければ良い。

See the Pen Underscore & Ajax $.getJSON by DriftwoodJP (@DriftwoodJP) on CodePen.

補遺

Backbone.js では Underscore.js を利用する。