追加のプラグイン機能は次のとおりです。
- 関連するデータを変更するときにレンダリングされたテンプレートの変更を大幅に簡素化するコマンドのセット。
- レンダリングされたテンプレートがドキュメント構造に追加された後に発生するレンダリングされたイベント。
追加関数のコードはjquery.tmplPlus.jsファイルに移動されているため、それらを使用するには、このファイルへのリンクを追加する必要があります。
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script> <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script> <script src="Scripts/jquery.tmplPlus.js" type="text/javascript"></script>
レンダリングされたテンプレートを変更するためのコマンド
チームを呼び出す
すべてのコマンドを呼び出すには、 jQuery.tmplCmd（）メソッドを使用します。
このメソッドには3つの呼び出し形式があります。
- jQuery.tmplCmd（コマンド、tmplItem）
- jQuery.tmplCmd（コマンド、tmplItems）
- jQuery.tmplCmd（コマンド、データ、tmplItems）
コマンドパラメーターは、コマンド名（ update 、 remove 、 replace、またはfind ）を指定するために使用されます。
tmlItemパラメーターは 、コマンドが機能するテンプレートインスタンスへの参照を渡すために使用されます。 したがって、 tmplItemsパラメーターを使用して、リンクの配列をテンプレートインスタンスに渡します。
dataパラメーターは、データ要素への参照またはそのようなリンクの配列にすることができ、 tmplItems配列をフィルターするために使用されます。 このパラメーターが指定されている場合、テンプレートのすべてのインスタンスが操作に参加するわけではなく、 dataパラメーターで指定されたデータ要素に関連付けられているインスタンスのみが参加します。
これらの3つの呼び出し形式のうち、どのコマンドが各コマンドに適用可能かを、これらのコマンドの説明で示します。
置換コマンド
replaceコマンドはおそらく最も興味深いもので、テンプレートを再レンダリングせずに、引数で指定された順序に従ってドキュメント構造内のレンダリングされたテンプレートの順序を変更します。
このコマンドは3つの形式の呼び出しを許可しますが、実用的な用途があるのはそのうちの1つだけです。
- jQuery.tmplCmd（「置換」、データ、tmplItems）
置換呼び出しの後、レンダリングされたテンプレートは、データ配列でデータ要素が参照される順序で再配置されます。 並べ替えに最適なソリューション！
それがどのように機能するか見てみましょう このセクションおよびこのセクションの他の例で使用するデータはdataItems配列にあります（この例の完全なコードはSamples.htmファイルにあります）。
var dataItems = [ { firstName: '', lastName: '' }, { firstName: ' ', lastName: '' }, ... ];
このデータを表示するには、次のテンプレートを使用します。
<script id="item_tmpl" type="text/x-jquery-tmpl"> <tr class="item"> <td>${firstName}</td> <td>${lastName}</td> <td> <img src="Images/item-edit.png" class="item-edit" title="Edit" /> <img src="Images/item-delete.png" class="item-delete" title="Delete" > </td> </tr> </script>
レンダリング後、テンプレートのすべてのインスタンスへのリンクをtmplItems配列に保存します。
$('#item_tmpl').tmpl(dataItems, options).appendTo('#items_bag'); tmplItems = $('#items_bag .item').map(function () { return $.tmplItem(this); }).get();
テーブルヘッダーのsort-ascクラスとsort-descクラスでマークされた画像にイベントハンドラーを添付します。 オプションのx-field-name属性には、ソートするフィールドの名前が含まれます。
<table id="items_bag"> <tr> <th>First Name <img src="Images/sort-asc.png" class="sort-asc" x-field-name="firstName" alt="" /> <img src="Images/sort-desc.png" class="sort-desc" x-field-name="firstName" alt="" /> </th> <th>Last Name <img src="Images/sort-asc.png" class="sort-asc" x-field-name="lastName" alt="" /> <img src="Images/sort-desc.png" class="sort-desc" x-field-name="lastName" alt="" /> </th> <th></th> </tr> </table>
昇順ソートのコードは次のとおりです。
$('#items_bag').delegate('.sort-asc', 'click', function () { var fieldName = $(this).attr('x-field-name'); dataItems.sort(function (a, b) { return compareStrings(a[fieldName], b[fieldName]); }); tmplItems = $.tmplCmd('replace', dataItems, tmplItems); });
ここでは、最初にソートするフィールドの名前を取得します。
var fieldName = $(this).attr('x-field-name');
次に、データ要素で配列をソートします。
dataItems.sort(function (a, b) { return compareStrings(a[fieldName], b[fieldName]); });
そして最後に、 replaceコマンドを呼び出して、ドキュメント内の変更されたデータを表示します。
tmplItems = $.tmplCmd('replace', dataItems, tmplItems);
replaceコマンドは、ドキュメント内のレンダリングされたテンプレートと同じ順序で配置されたテンプレートインスタンスへのリンクの配列を返すので、 tmplItemsで 置換実行の結果を保存します 。
降順でソートするためのコードは似ています：
$('#items_bag').delegate('.sort-desc', 'click', function () { var fieldName = $(this).attr('x-field-name'); dataItems.sort(function (a, b) { return compareStrings(a[fieldName], b[fieldName]); }).reverse(); tmplItems = $.tmplCmd('replace', dataItems, tmplItems); });
仕組みは以下のビデオに示されています。
更新コマンド
更新コマンドは、テンプレートの再レンダリングを開始します。 実際、これは、追加オプションを使用したテンプレートインスタンスのupdate（）メソッドに相当します。 最も論理的な用途は、データを変更した後にドキュメントを更新することです。
このコマンドは3つの形式の呼び出しを許可し、 replaceコマンドとは異なり、これらの形式にはすべて実用的なアプリケーションがあります。
- jQuery.tmplCmd（ 'update'、tmplItem）
- jQuery.tmplCmd（ 'update'、tmplItems）
- jQuery.tmplCmd（「更新」、データ、tmplItems）
テーブルエディタの例でどのように機能するかを見てみましょう（完全な例のコードはSamples.htmファイルにあります）。 アイテムを編集するためのコードは次のとおりです。
$('#items_bag').delegate('.item-edit', 'click', function () { var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data; editDialog.show(dataItem, function () { $.tmplCmd('update', tmplItem); }); });
ここでは、最初にテンプレートインスタンスへのリンクとデータ項目へのリンクを取得します。
var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data;
次に、ユーザーが[OK]をクリックし、データが変更された場合に呼び出されるデータ項目とコールバック関数へのリンクを渡すダイアログボックスを呼び出します。
editDialog.show(dataItem, function () { $.tmplCmd('update', tmplItem); });
そして、コールバック関数で、 updateコマンドを呼び出して、テンプレートインスタンスへのリンクを与えます。これにより、テンプレートインスタンスが再びレンダリングされます。
$.tmplCmd('update', tmplItem);
仕組みは以下のビデオに示されています。
削除コマンド
ご想像のとおり、removeコマンドは、レンダリングされたテンプレートをドキュメント構造から削除します。 updateコマンドと同様に、呼び出しには3つの形式があります。
- jQuery.tmplCmd（ 'remove'、tmplItem）
- jQuery.tmplCmd（「削除」、tmplItems）
- jQuery.tmplCmd（「削除」、データ、tmplItems）
このコマンドの特徴は、レンダリングされたテンプレートをドキュメント構造から削除するだけでなく、 tmplItems配列から対応するテンプレートインスタンスへのリンクも削除することです！
私の意見では、これはかなり珍しいアプローチです-一方では、 tmplItems配列を一貫した状態に維持するために必要な労力をわずかに削減し、他方では、不快な状況を作り出す可能性があります。 おそらく私はこのチームに副作用がないことを好むでしょう。
テーブル要素を削除するコードを以下に示します。
$('#items_bag').delegate('.item-delete', 'click', function () { var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data; if (confirm('Do you really want to delete "' + dataItem.firstName + ' ' + dataItem.lastName + '"?')) { dataItems.splice(jQuery.inArray(dataItem, dataItems), 1); $.tmplCmd('remove', dataItem, tmplItems); updateDebugInfo(); } });
ここでは、最初にテンプレートインスタンスへのリンクとデータ項目へのリンクを取得します。
var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data;
そして、ユーザーから確認を受け取った後、最初に対応する要素をdataItems配列から削除します。
dataItems.splice(jQuery.inArray(dataItem, dataItems), 1);
次に、対応するレンダリングされたテンプレートをドキュメント構造から削除すると同時に、 tmplItems配列からテンプレートインスタンスへのリンクを削除します。
$.tmplCmd('remove', dataItem, tmplItems);
updateDebugInfo（）関数のコードは次のとおりです。
function updateDebugInfo() { $('#data_items_length').text(dataItems.length); $('#tmpl_items_length').text(tmplItems.length); }
この関数は、 removeコマンドの副作用を示すことのみを目的としています。
仕組みは以下のビデオに示されています。
検索コマンド
findコマンドは 、特定のデータに関連付けられたテンプレートインスタンスを検索するために使用されます。 更新および削除コマンドと一緒に、すべてのテンプレートの再レンダリングに時間がかかりすぎる場合にドキュメントを「スポット」更新するために使用できます。
このコマンドは、1つの形式の呼び出しのみを許可します。
- jQuery.tmplCmd（ 'find'、データ、tmplItems）
このコマンドの結果は、 データ引数を介して渡されたデータに関連付けられたテンプレートインスタンスへのリンクの配列です。
findコマンドの使用例を以下に示します（完全なサンプルコードはSamples.htmファイルにあります）。
$('#item_rnd').click(function () { var dataItem = dataItems[Math.round(Math.random() * (dataItems.length - 1))]; var tmplItem = $.tmplCmd('find', dataItem, tmplItems)[0]; $(tmplItem.nodes).css('background-color', '#ff0000'); $(tmplItem.nodes).animate({ 'background-color': '#ffffff' }, 1500); });
この例では、データアイテムをランダムに選択します。
var dataItem = dataItems[Math.round(Math.random() * (dataItems.length - 1))];
次に、 findコマンドを使用して、このデータ項目が関連付けられているテンプレートインスタンスを見つけます。
var tmplItem = $.tmplCmd('find', dataItem, tmplItems)[0];
最後に、表の対応する行を強調表示します。
$(tmplItem.nodes).css('background-color', '#ff0000'); $(tmplItem.nodes).animate({ 'background-color': '#ffffff' }, 1500);
実際のアプリケーションでは、たとえばAJAXリクエストを使用して、更新されたデータを取得できます。
仕組みは以下のビデオに示されています。
レンダリングされたイベント
レンダリングされたイベントはテンプレートインスタンスに対して定義され、レンダリングされたテンプレートがドキュメント構造に配置された後に呼び出されます。
イベントハンドラーを設定するには、 .tmpl（）呼び出しのoptionsパラメーターを使用します。
var options = { rendered: function (tmplItem) { if (window.console) { console.log("rendered: %s %s", tmplItem.data.firstName, tmplItem.data.lastName); } } }; $('#item_tmpl').tmpl(dataItems, options).appendTo('#items_bag');
このイベントが必要になる可能性がある最も明らかなシナリオは、デバッグです。 上記の例では、テンプレートがレンダリングされるたびに、メッセージがデバッグコンソールに表示されます。これにより、 replaceコマンドが実際に再レンダリングされないことを確認しやすくなり、上記の例のupdateコマンドはテーブルの1行のみを更新します。
仕組みは以下のビデオに示されています。
おわりに
この記事で使用されている例の完全なコードは、 このリンクからダウンロードできます。
また、 ASP.NET CDN Webサイトから、またはGitHubリポジトリから直接jQueryテンプレートをダウンロードできることを思い出させてください。
jQueryテンプレートのドキュメントは、jQueryドキュメントサイトで入手できます。