JsRenderチュートリアル - テンプレートに名前を付けて管理する
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
JsRenderを使って、テンプレートに名前を付けて管理する
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result_greets"></div> <hr/> <div id="result_fruits"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="js/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { // データは文字列の配列 var greets = [ "こんにちは", "Hello" ]; // データはオブジェクトの配列 var fruits = [ { name: "りんご", num: 3 }, { name: "いちご", num: 5 }, { name: "バナナ", num: 2 } ]; // テンプレートに名前を付けて登録。 $.templates({ greetsTemplate: "#template_greets", fruitsTemplate: "<p>{{>name}}が{{>num}}個あります</p>" }); // 各テンプレートをレンダリング $('#result_greets').html( $.render.greetsTemplate(greets) ); $('#result_fruits').html( $.render.fruitsTemplate(fruits) ); }); </script> <!-- テンプレート --> <script id="template_greets" type="text/x-jsrender"> <p>{{>#data}} !</p> </script> </body> </html>
説明
テンプレートの数が多くなる、あるいは、使い回しをする場合、テンプレートに名前を付けて管理できると楽になる場合があります。JsRenderもテンプレートに名前を付けて管理できます。テンプレートに名前をつける場合は、$.templatesに
- テンプレートの名前
- テンプレートへのセレクタ文字列、あるいは、テンプレート文字列
を渡します。
$.templates({ greetsTemplate: "#template_greets", fruitsTemplate: "<p>{{>name}}が{{>num}}個あります</p>" });
一方、名前を付けたテンプレートを利用する場合、$.renderオブジェクトに先ほどのテンプレート名を名前に持つメソッドが用意されますので、それを使用します。
$.render.greetsTemplate(greets)
戻り値はレンダリング結果です。