読者です 読者をやめる 読者になる 読者になる

うめすこんぶ

日々のプログラミングで残しておきたいメモ.何かの役に立てれば幸いです.

BackBone.jsのソースに出てきたscript type=text/templateの意味は?

スポンサーリンク

backbone.jsのExsampleに出てくるTODOアプリのソースを見たところ、 todo.htmlにこんなコードが。jspみたいな構文が書いてあります。

  <script type="text/template" id="item-template">
    <div class="view">
      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <label><%- title %></label>
      <a class="destroy"></a>
    </div>
    <input class="edit" type="text" value="<%- title %>" />
  </script>

  <script type="text/template" id="stats-template">
    <% if (done) { %>
      <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
    <% } %>
    <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
  </script>

なんだろうと思って調べてみました。

text/templateはブラウザが解析できる構文ではないので、通常無視される。
template liblaryを使用することで、このtemplate部分にHTMLを埋め込むことができる。
ちなみにtemplate liblaryの例は、 Mustache, Haml, Ecoとか、underscore.jsの一部。

text/templateの中に入れた文は通常現れないので、クリックすると現れるリストのように、はじめは隠しておきたいものをこの中に入れておく、というのもありですね。 あとは、変数とか式をかけるので、JSPみたいな感覚で使用することができるというわけですね。