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みたいな感覚で使用することができるというわけですね。