JsRenderチュートリアル - for、propsタグとelseタグ
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
テンプレート内のfor、propsタグとelseタグを組み合わせて使ってみる
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // for、propsタグとelseタグ $(function() { // 表示するデータ var data = [ { color: "赤", fruits: [ { name: "りんご", num: 3 }, { name: "いちご", num: 5 }, {} ] }, { color: "緑", }, { color: "黄", fruits: [ { name: "バナナ", num: 2 } ] } ]; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"に変数dataを渡し、 // レンダリング結果を表示 $("#result").html($.render.linkTemplate(data)); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> {{for #data tmpl="#template_item"/}} </script> <script id="template_item" type="text/x-jsrender"> <h3>{{>color}}色</h3> {{for fruits}} {{props #data}} <p>{{>key}}の値は{{>prop}}です</p> {{else}} 空っぽです! {{/props}} {{else}} 何もありません {{/for}} </script> </body> </html>
説明
forタグやpropsタグ、カスタムタグはelseタグと組み合わせて使うことができます。データが存在しない場合のメッセージなど、elseタグ側に条件を満たさない場合の内容を記述します。
{{for [配列]}} : {{else}} : {{/for}} {{props [オブジェクト]}} : {{else}} : {{/prop}}