Underscore.js_javascriptスキルのテンプレート機能の紹介と応用-jsチュートリアル-php.cn

Underscore は、プログラミングに必要な多くの関数をサポートする非常に実用的な JavaScript ライブラリです。ネイティブ JavaScript オブジェクトを拡張することなく、多くの実用的な関数を提供します。 小さな JS コードを作成する場合でも、大規模な HTML5 アプリケーションを作成する場合でも、アンダースコアは役に立ちます。現在、underscore は広く使用されています。たとえば、backbone.js が強く依存するライブラリは underscore.js だけです。 今日は主にUnderscoreのフロントエンドテンプレート機能について説明します。テンプレート機能は前回紹介したJavaScriptフロントエンドテンプレートと同じです。データの処理がより便利になります。参考と勉強のために小さな例を書きました。

完全なサンプルのダウンロード

コードをコピー コードは次のとおりです: アンダースコア メタ名= "apple-mobile-web-app-capable" content="yes" /> link href= "index.css" rel="stylesheet" type="text/css" /> --ace -template デモ--> 🎜> ">【 】 });

データ -- > var data = [ { タイトル: "1942", url: "http://www.jb51.net" 🎜>フィルム: "ムービー 1" }, { タイトル: "ライフ オブ パイ", URL: "http://www.jb51.net", フィルム : "映画 2" }, { タイトル: "ゴッドファーザー", url: "http://www.jb51.net", フィルム:"映画 3" }, { タイトル: "ショーシャンクの空に", url: "http://www.jb51.net", 映画: "ムービー 4" }, { タイトル: "3d2012"、 url: "http://www.jb51.net"、 フィルム: "ムービー 5" } ]; >$("body").html( _.template($("#t2").html(), datas)); $('.ul>li:last-child') ).addClass('last-li'); $('body>div:first-child>ul').show(); $('.title').click(function(){ $(this).siblings().toggle(); $(this).parent().siblings().children('.bbs-nav-ul').hide(); >} ) $('.title').hover(function(){ $(this).toggleClass('hover'); }) $('.ul>li')。 hover( function(){ $(this).toggleClass('hover'); }) </script