このトピックでは、テンプレート エンジンによって開発者に公開されているオプションと機能の概要について説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
このトピックは、以下のセクションで構成されます。
以下の表は、テンプレート エンジンの主な機能についてまとめています。追加の詳細は、以下の概要表の下に示します。
凡例:
条件 - 条件付き (コンピューター プログラミング言語のステートメントまたは式)。true と false の 2 つの値を取ります。
| 機能 | 構文 | 説明 |
|---|---|---|
| スカラー プロパティ出力 (置換) | ${property } |
変数出力 |
| ネストされたプロパティ出力 (置換) | ${parent.property } |
ネストしたプロパティの編集出力 |
| ブロック if タグ | {{if 条件 }} 何らかの処理 {{/if}} |
then 分岐がある条件。"何らかの処理" は、その場合に適用されるテンプレートです |
| ブロック if- else タグ | {{if 条件}}何らかの処理 {{else}} 何らかの処理 {{/if}} |
then および otherwise 分岐がある条件。 |
| ブロック if-elseif-else タグ | {{if 条件}}何らかの処理 {{elseif 条件 }}別の処理 {{else}} デフォルトの処理 {{/if}} |
then および複数の "そうでない場合" の分岐と、最後にデフォルトの分岐がある条件。 |
| ブロック each タグ | {{each movies }} ${movies.name} {{/each}} |
ネストしたプロパティの繰り返しと出力です。 |
| インデックス | $i |
データ メンバーに対する現在の繰り返しのインデックスにアクセスするための予約済みキーワードです。 |
| データ | $data |
データ メンバーに対する現在の繰り返しのデータにアクセスするための予約済みキーワードです。 |
| コメント | #そのコメントは無視されます# $i |
記号 # で始まり # で終わるコメントは、テンプレート エンジンで無視されます。 |
テンプレートを適用するとき、結果の型は String です。
テンプレートをデータに適用するためにインフラジスティックス テンプレート エンジンを使用する場合には、結果の型が文字列であることに注意してください。つまり、以下のすべてのサンプルで、結果の変数は文字列です。
テンプレート エンジンは、定義済みのプロパティ名を認識し、その値は、渡されたデータ内の対応するプロパティ値で置き換えられます。
例:
JavaScript の場合:
data = [{prop: 'Value'}]
$.ig.tmpl('${prop}', data)
結果: Value
テンプレート エンジンは、親プロパティの子プロパティを認識し、その値は、渡されたデータ内の対応するプロパティ値で置き換えられます。
例:
JavaScript の場合:
var data = [{parent: {child1: 'Val', child2: 'Val2'}}];
var result = $.ig.tmpl('${parent.child2}', data);
結果: Val2
テンプレート エンジンは、テンプレート中で定義された、完全な条件付きブロックか、開いた条件付きブロックと閉じた条件付きブロックを認識します。構文は {{if 条件}} 何らかの処理 {{/if}} です。
注: ブロックのリストはサポートされていません。ブロックのリストはサポートされていないことに注意してください。つまり、次の "
{{if *条件 1* }}何らかの処理{{/if}} {{if *条件 2* }}別の処理{{/if}}" は、正しく定義されたブロックではありません。
例:
JavaScript の場合:
var data = [{ Value: 1, Text:"Value1"},{ Value: 2, Text:"Value2"}];
var result = $.ig.tmpl('{{if ${Value} === 2}} ${Text} {{/if}}', data);
結果: Value2
テンプレート エンジンは、テンプレート中でデフォルト ステートメントを使用して定義された、完全な条件付きブロックか、開いた条件付きブロックと閉じた条件付きブロックを認識します。構文は "{{if 条件}} 何らかの処理 {{else}} デフォルトの処理 {{/if}}" です。
例:
JavaScript の場合:
var data = [{prop: 2}];
var result = $.ig.tmpl('{{if ${prop} > 2}} ${prop}{{else}} "The minimum value is 2" {{/if}}', data);
結果: The minimum value is 2
テンプレート エンジンは、テンプレート中で定義された elseif や else のような、条件の継続などの内側のブロック ステートメントを認識します。構文は、"{{if 条件}} 何らかの処理 {{elseif}} 別の処理 {{else}} デフォルトの処理 {{/if}}" です。
例:
JavaScript の場合:
var data = [{value: 1}, {value: 2}, {value: 3},{value: 4}];
var result = $.ig.tmpl('{{if ${value} == 1}} <b>${value}</b>{{elseif ${value} == 2 }} <i>${value}</i> {{else}} ${value} {{/if}}', data);
結果: 1 2 3 4。1 は太字スタイル、2 は斜体スタイル、3 と 4 は標準を表します。
テンプレート エンジンは、each ブロックを認識しサポートしています。ブロックは完了している必要があります。エンジンは、配列のメンバーを繰り返し処理し、${member.prop} 構文を使用してプロパティにアクセスできます。each ブロックの構文は "{{each Member}} Member.Prop に関連する処理 {{/each}}" です。
例:
JavaScript の場合:
var movies = [
{
name: "movie1",
actors: [
{name: "name1", age: 35},
{name: "name2", age: 45}
]
}];
var result = $.ig.tmpl('{{each ${actors} }} ${actors.name}, ${actors.age} <br /> {{/each}}', movies);
結果: name1, 35
name2, 45
JavaScript の場合:
var data = [{value: 11}, {value: 22}];
var result = $.ig.tmpl('$i: ${value} ', data);
結果: 0: 11 1: 22
JavaScript の場合:
var data = [{tagsList: ["Rock", "Alternative"]}, {tagsList: ["Pop", "Dance"]}]; var result = $.ig.tmpl('{{ each ${tagsList} }} $data {{/each}}', data);
結果: Rock Alternative Pop Dance
テンプレート エンジンは、テンプレート中のコメントを認識し無視します。ハッシュ タグ (#) は、コメントの始まりを定義し、もう 1 つのハッシュタグがコメントの終わりを定義します。
例:
JavaScript の場合:
var data = [{value: 1}, {value: 2}];
var result = $.ig.tmpl('#This comment will be ignored#<p>$i</p>', data);
結果:
<p>0</p><p>1</p>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
代替行表示テンプレートの作成: このトピックでは、テンプレート エンジンを使用して代替行表示テンプレートを作成する方法を紹介します。
基本的な条件付きテンプレートの作成: このトピックでは、テンプレート エンジンを使用して基本的な条件付きテンプレートを作成する方法を紹介します。
基本的な置換テンプレートの作成: このトピックでは、テンプレート エンジンを使用して基本的な置換テンプレートを作成する方法を紹介します。
複合プロパティ置換テンプレートの作成: このトピックでは、テンプレート エンジンを使用して複合プロパティ置換テンプレートを作成する方法を紹介します。
デフォルト ステートメントを含む条件付きテンプレートの作成: このトピックでは、テンプレート エンジンを使用して、デフォルト ステートメントを含む条件付きテンプレートを作成する方法を紹介します。
デフォルト ステートメントを含む複数条件付きテンプレートの作成: このトピックでは、コード例を示し、テンプレート エンジンを使用して、デフォルト ステートメントを含む複数条件付きテンプレートを作成する方法を紹介します。
ネスト ブロック テンプレートの作成: このトピックでは、テンプレート エンジンを使用してネストブロック テンプレートを作成する方法を紹介します。
このトピックについては、以下のサンプルも参照してください。
基本的な使用方法: Infragistics テンプレート エンジンは、すべての Ignite UI for jQuery コントロールの一貫性のあるテンプレート構文を提供します。このサンプルでは、igCombo コントロールのヘッダー、項目、およびフッターをカスタマイズするテンプレート化構文を紹介します。
グリッドの列テンプレート: このサンプルは、igGrid の列テンプレート機能を使用して列にボタンを挿入する方法を紹介します。各行の右の列にボタンがあります。ボタンを押すと、含まれる行を削除します。
条件付きテンプレート: このサンプルは、Infragistics テンプレート エンジンを使用して条件付きのセル テンプレートをグリッドで使用する方法を紹介します。「単位価格」列のセルは上矢印または下矢印の画像を含みます。「差分価格」列は動的に作成して非表示されます。上矢印または下矢印の画像は、非表示される列の値と「単位価格」列の値の比較に基づいて適用されます。Infragistics テンプレート エンジンは「デルタ価格」列と「単位価格」列の値を比較します。「差分価格」列の値が「単位価格」値より大きい場合、緑色の上矢印を描画します。そうでない場合、赤色の下矢印を描画します。
ネスト テンプレート: このサンプルは、Infragistics テンプレート エンジンを使用してネストされたテンプレートを使用する方法を紹介します。以下のシナリオでは、Infragistics テンプレート エンジンの機能を使用して、データ ソースの映画コレクションを繰り返します。最後の列では、出力は非順序リストとして作成されます。
ASP.NET MVC の使用方法: Ignite UI for MVC を使用すると、ASP.NET MVC ビューに Infragistics テンプレート エンジンを使用できます。JavaScript との使用方法は同じです。
オンラインで表示: GitHub