JsRenderチュートリアル - 独自のタグを作る
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
デバッグ出力用の独自タグを作る
コード
<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"> // カスタムタグ $(function() { // デバッグ出力用タグの定義 // 渡された値をconsole.logに出力するだけ $.views.tags("log", function(obj) { console.log('%cDebug', 'color: red;', obj); }); // 表示するデータ var fruits = { items: [ { 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"> <p>ブラウザの開発ツール/デベロッパーツール、FireBugのコンソールタブを確認して下さい</p> {{log #data/}} </script> </body> </html>
説明
JsRenderでは、独自のタグを追加することができます。基本的な構文は以下のようになります。
$.views.tags([タグ名], [JavaScriptの関数]); もしくは $.views.tags([プロパティ名がタグ名、値がJavaScriptの関数のオブジェクト]);
コード例では、前者の書式で、渡された値をブラウザの開発ツールやデベロッパーツールのコンソールにそのまま出力する"log"というタグを定義しています。
複数同時に登録する場合は、後者の書式で登録します。
$.views.tags({ log: function(obj) { console.log('%cDebug', 'color: red;', obj); }, anotherTag: function(obj) { ... } });