このトピックでは、テンプレート エンジンを使用してネストしたブロック テンプレートを作成する方法を紹介します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
テンプレート エンジンの参照の追加: このトピックでは、テンプレート エンジンを使い始めるために必要な最低限の JavaScript ファイルについて説明します。
テンプレート エンジンの概要: このトピックには、テンプレート エンジンでサポートされている機能に関する情報が含まれています。
このトピックは、以下のセクションで構成されます。
この例では、ネストしたブロック テンプレートを作成し、結果を HTML テーブルに追加します。
以下のスクリーンショットは、データ ソースでは 3 つあるネストしたプロパティ (firstName、lastName、age) を 2 つのグループ (Name と Age) に結合する方法を示しています。テンプレート エンジンは、teamMembers 配列内の各項目を繰り返し処理します。この例で実装された、ネストしたブロック テンプレートの適用結果。
この手順を実行するには、以下が必要です。
以下の手順は、基本的な置換テンプレートを作成する方法を示します。
テンプレート エンジンを使用して行テンプレートを追加して適用します
サンプル データと行テンプレートをページに追加します。
JavaScript の場合:
<script type="text/javascript">
var team = [{
teamMembers: [
{ firstName: "Joseph", lastName: "Sommers", age: 35 },
{ firstName: "Anna ", lastName: "Paterson", age: 25},
{ firstName: "Mark", lastName: "Smith", age: 40} ]
}];
var template = '{{each ${teamMembers} }}' +
'<tr><td><b>Name: </b>${teamMembers.firstName} ${teamMembers.lastName}</td>' +'<td><b>Age: </b>${teamMembers.age}</td></tr>' +
'{{/each}}';
</script>
HTML の場合:
<body>
<table id="resultTable" style="border: 1px solid #000;"></table>
</body>
テンプレートを適用し、結果を HTML テーブルに追加します。
JavaScript の場合:
<script type="text/javascript">
$(document).ready(function () {
var result = $.ig.tmpl(template, team);
$('#resultTable').html(result);
});
</script>
(オプション) 結果を確認します。
ファイルを保存し、ダブルクリックして結果をプレビューします
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
テンプレート エンジンの概要: このトピックでは、IG テンプレート エンジンに関するすべての情報についてのトピックを示します。
基本的な置換テンプレートの作成: このトピックでは、IG テンプレート エンジンを使用して基本的な置換テンプレートを作成するための段階的な手順を紹介します。
基本的な条件付きテンプレートの作成: このトピックでは、IG テンプレート エンジンを使用して基本的な条件付きテンプレートを作成するための段階的な手順を紹介します。
複合プロパティ置換テンプレートの作成: このトピックでは、IG テンプレート エンジンを使用して複合プロパティ置換テンプレートを作成するための段階的な手順を紹介します。
デフォルト ステートメントを含む 条件付きテンプレートの作成: このトピックでは、IG テンプレート エンジンを使用して、デフォルトのステートメントを使用した条件付きテンプレートを作成するための段階的な手順を紹介します。
デフォルト ステートメントがある複数条件付きテンプレートの作成: このトピックでは、IG テンプレート エンジンを使用して、デフォルトのステートメントを使用した複数条件付きテンプレートを作成するための段階的な手順を紹介します。
代替行表示テンプレートの作成: このトピックでは、IG テンプレート エンジンを使用して代替行表示テンプレートを作成するための段階的な手順を紹介します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub