JsViewsチュートリアル - リンクしたテンプレートをまるごと差し替える
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでリンクしたテンプレートを別のテンプレートに差し替える
コード
<html> <body> <div id="list_simple"></div> <hr/> <button id="add">add</button> <button id="switch">switch</button> <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() { var fruits = { foo: 'foo', bar: 'bar' }; $.templates({ template1: "#template1", template2: "#template2" }); var current_template = $.templates.template1; $.link.template1("#list_simple", fruits); $(document) .on('click', '#add', function(ev) { $.observable(fruits).setProperty({ code: "99", name: "ドリアン" }); }) .on('click', '#switch', function(ev) { /** * テンプレートを差し替えるviewオブジェクトを取得する */ var $view = $.view('#inner'); // $.view($('#inner'))でもOK if (current_template == $.templates.template1) { current_template = $.templates.template2; } else { current_template = $.templates.template1; } /** * テンプレートを差し替える * * コンパイル済みテンプレートでない場合、$.templates('#template1')の * ような書式でもOK */ $view.tmpl = current_template /** * 新しいテンプレートで再描画 */ $view.refresh(); }); }); </script> <script id="template1" type="text/x-jsrender"> {^{if #data}} <div id="inner"> {^{>code}}/{^{>name}} </div> {{/if}} </script> <script id="template2" type="text/x-jsrender"> <h1 id="inner"> {^{>foo}}:{^{>bar}} </h1> </script> </body> </html>
説明
リンクしたテンプレートを何らかのイベントが発生したタイミングで、別のテンプレートに差し替える事もできます。この場合、viewオブジェクトのtmplプロパティに別のテンプレートオブジェクトを代入し、viewオブジェクトのrefreshメソッドを呼び出すことで新しいテンプレートを使って再描画させます。