JsRenderチュートリアル - テンプレートでのループ
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
テンプレート内でforタグを使ってループさせながら値を表示する
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="js/jsrender.min.js" type="text/javascript"></script> <script type="text/javascript"> // ループ - forタグ $(function() { // 表示するデータ var fruits = [ { name: "りんご", num: 3 }, { name: "いちご", num: 5 }, { name: "バナナ", num: 2 } ]; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"に変数fruitsを渡し、 // レンダリング結果を表示 $('#result').html($.render.linkTemplate(fruits)); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> {{for #data}} <p>{{>name}}が{{>num}}個あります</p> {{/for}} </script> </body> </html>
説明
プログラミング言語と同様、JsRenderにもfor文があります。ただし、配列に対してのみ有効です。構文はforタグを使って以下のようになります。
{{for [配列]}} : {{/for}}