Underscore.jsのテンプレート機能の紹介と応用

Underscoreは非常に実用的なJavaScriptライブラリであり、多くのプログラミングに必要な機能のサポートを提供し、JavaScriptのオリジナルオブジェクトを拡張することなく多くの実用的な機能を提供しています.
小さなjsコードを書いても、大きなHTML 5アプリケーションを書いてもunderscoreは役に立ちます.現在、underscoreはbackboneのように広く使用されている.jsの唯一の強い依存ライブラリはunderscoreです.js.
今日は主にUnderscoreのフロントエンドテンプレート機能について議論します.そのテンプレート機能は、前編で紹介したjavascriptフロントエンドテンプレートと同じです.データの処理がより便利になります.皆さんの参考にして勉強するために、小さな例を書きました.
完全なインスタンスのダウンロード

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br><%_.each(datas, function(item) {%> 
  <br><div class="outer"> 
  <br><div class="title"> 
  <br><span ><%=item.film%></span> 
  <br></div> 
  <br><ul class="ul"> 
  <br><%_.each(datas, function(item) {%> 
  <br><li> 
  <br><a href="<%=item.url%>">【<%=item.title%>】</a> 
  <br></li> 
  <br><%});%> 
  <br></ul> 
  <br></div> 
  <br><%});%> 
  <br> 
  
 
  
 
  <br>var datas = [ 
  <br>{ 
  <br>title: "    ", 
  <br>url: "//www.jb51.net", 
  <br>film:"  1" 
  <br>}, 
  <br>{ 
  <br>title: "      ", 
  <br>url: "//www.jb51.net", 
  <br>film:"  2" 
  <br>}, 
  <br>{ 
  <br>title: "  ", 
  <br>url: "//www.jb51.net", 
  <br>film:"  3" 
  <br>}, 
  <br>{ 
  <br>title: "      ", 
  <br>url: "//www.jb51.net", 
  <br>film:"  4" 
  <br>}, 
  <br>{ 
  <br>title: "3d2012", 
  <br>url: "//www.jb51.net", 
  <br>film:"  5" 
  <br>} 
  <br>]; 
  <br>$("body").html( _.template($("#t2").html(), datas)); 
  <br> 
  
 
  
 
  <br>$('.ul').hide(); 
  <br>$('.ul>li:last-child').addClass('last-li'); 
  <br>$('body>div:first-child>ul').show(); 
  <br>$('.title').click(function(){ 
  <br>$(this).siblings().toggle(); 
  <br>$(this).parent().siblings().children('.bbs-nav-ul').hide(); 
  <br>}) $('.title').hover(function(){ 
  <br>$(this).toggleClass('hover'); 
  <br>}) 
  <br>$('.ul>li').hover(function(){ 
  <br>$(this).toggleClass('hover'); 
  <br>}) 
  <br>