このトピックでは、条件付きテンプレートの使用方法と、AngularJS の Ignite UI for jQuery ディレクティブを使用して作成されたコントロールをカイタマイズするための高度なテンプレート化の方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
このトピックは、以下のセクションで構成されます。
Ignite UI for jQuery コントロールは、テンプレート化の処理にデフォルトで Infragistics テンプレート エンジン を使用するため、特に宣言によってAngular アプリケーション内に Ignite UI for jQuery コントロールを作成する際に考慮が必要ないくつかの特徴があります。テンプレート エンジンは、${property} 表記を使用した一般的な置換と、二重の波括弧を使用した 条件付き演算と反復演算 (例: {{condition / loop}} ) の両方をサポートします。しかし後者は、バインディングと同じ構文を使用するため Angular の 式 の評価と直接競合ため、そのようなテンプレートを認識し、解析しようとします。これは、構文とコンテキストとの違いによって例外が発生する場合もあり、ほとんど予想される効果がありません。エラーにならない場合でも、コントロールのレンダリング処理実行時の評価で使用するテンプレートのマークアップを変更する可能性があります。このトピックでは、宣言に複合テンプレートを使用する別な方法と、異なるエンジン間でテンプレート処理全体をカスタマイズする方法を紹介します。
エンジンで処理されたテンプレートは、グローバル ウィンドウ スコープでも評価されます。したがって、parseInt() または Math などのグローバル関数とオブジェクトを、条件節で算術演算に追加して使用できます。同様に、$scope プロパティはそのままでは評価に使用できません。
またコントロール テンプレートは、頻繁にドキュメントまたは Angular のスコープ以外のコンテキストも対象にします。たとえば、igGrid 列テンプレートは、描画される現在のデータ レコードのコンテキストで評価され、通常データ ソースに対して直接評価することができません。各コントロールは、データ項目を対象のテンプレートに一致させ、それらをテンプレート関数に渡す必要があります。
スコープが定義されたオプションによるコントロールの初期化で、テンプレート化構文を使用することはできますが、宣言によって定義されたテンプレートの場合は常にできるとは限りません。
テンプレート プロパティが定義されたディレクティブ内の場所によって異なります。たとえば、igCombo の itemTemplate のように、多くの場合テンプレートはコントロールの最上位オプションになります。
HTML の場合:
<ig-combo id="combo1"
item-template='${ProductName} {{if ${UnitsInStock} > 0 }} ${UnitsInStock} {{/if}}'
data-source="northwind"
text-key="ProductName"
value-key="ProductID">
ig-combo>
この構成では、Angular によりテンプレートが解析され、例外をスローしようとします。これは、カスタムタグでさえも、コントロールが使用する実際の有効な HTML タグで置換された後も、親 (例: <ig-combo>) 要素からの属性が引き継がれるためです。しかし、igDataChart の series.tooltipTemplate または igGrid 上の columns.template は正しく動作します。
HTML の場合:
<ig-data-chart id="datachart1" data-source="dataChart">
<!-- ... -->
<series>
<series name="2015Population" type="column" value-member-path="Pop2015"
x-axis="NameAxis" y-axis="PopulationAxis"
show-tooltip="true"
tooltip-template="${item.CountryName} <br> Population: <strong>${item.Pop2015}</strong>
{{if ${item.Pop2015} > ${item.Pop2005} }} <img width='10' height='15' src= 'images/arrowUp.gif' />
{{else}} <img width='10' height='15' src= 'images/arrowDown.gif' /> {{/if}}">
</series>
</series>
</ig-data-chart>
HTML の場合:
<ig-grid id="grid1" data-source="northwind" primary-key="ProductID">
<columns>
<!-- ... -->
<column key="UnitsInStock" header-text="In Stock" width="100px" data-type="number"
template=" ${UnitsInStock} {{if ${UnitsOnOrder} >= ${UnitsInStock} }} <img src= 'images/warning.png' /> {{/if}}>
</column>
</columns>
</ig-grid>
ブート処理中のディレクティブ テンプレート化のフェーズで、親の下のネストされた要素が削除されるため、テンプレートは正しく動作し問題なく使用できます。
競合に対処する最も簡単な方法は、ng-app ディレクティブの外側にテンプレートを定義することですが、その場合テンプレートを Ignite UI for jQuery ディレクティブ オプションの一部とすることができません。それでも、外部テンプレートの使用から適切な効果を得ることができます。たとえば、コードを読みやすくする、またはコントロール間でテンプレートを共有できるようになります。どちらの場合も必要なのは、コントロールの初期化に使用するテンプレートをディレクティブが認識できることと、スコープ メソッドを使用できることです。
Angular のスコープ内に定義された関数は、オプションの評価を通してテンプレート値の提供に使用できます。初期化のための複合タスクの実行もドキュメント内に定義されたテンプレートへのアクセスも提供することができます。コントロールによっては、テンプレート自体の提供、またはテンプレート (igDataChart など) を確認できるID の提供のいずれかを選択できる場合もありますが、Ignite UI for jQuery ディレクティブは、後の処理のために getHtml() 関数をスコープに登録します。
JavaScript の場合:
function getHtml(selector){
return $(selector).html();
};
これにより、スコープに jQuery 選択プロキシを提供します。カスタム実装が既に存在する場合、関数はオーバーライドしません。さらに、オプション評価 getHtml() を使用すると、テンプレートなどの任意のオプションを HTML に提供することができます。
HTML の場合:
<ig-grid id="grid1" data-source="northwind" auto-generate-columns="false">
<columns>
<column key="UnitPrice" header-text="Unit Price" width="100px" data-type="string"
template="{{getHtml('#colTemplate')}}">
</columns>
</ig-grid>
colTemplate の ID を持つ要素が Angular アプリケーションの外側に定義されたテンプレートのコンテナーの場合:
HTML の場合:
<script id="colTemplate" type="text/template"></script>
Angular アプリケーションのスコープ内の配置が必要な外部テンプレートを定義する場合は、ng-non-bindable ディレクティブによってテンプレート コンテナーを指定するオプションで、AngularJS に解析をスキップし、要素のコンテンツをコンパイルするように指示できます。
HTML の場合:
<script id=" colTemplate " type="text/template" ng-non-bindable>
…
script>
このようなテンプレートは、すでに説明した getHtml() 関数を使用して再度オプションに割り当てることができます。
関連サンプル:igGrid のサンプル
デフォルトでは、Infragistics テンプレート エンジンを使用しますが、他のエンジンも使用できます。たとえば、igGrid には jsRender サポートが組み込まれています。1 つの関数をオーバーライドすることで異なるエンジンを簡単にプラグインできます。
jsRender は強力で高速なテンプレート エンジンです。複合テンプレートを処理することができ、カスタム タグやヘルパー関数を拡張してカスタマイズ可能な高度なテンプレートを作成できます。グリッド内の jsRender Integration は templatingEngine オプションによって制御されます。
HTML の場合:
<ig-grid data-source="northwind" auto-generate-columns="false" templating-engine="jsRender" >
<columns>
<column key="UnitPrice" header-text="Unit Price" width="100px" data-type="string" template="$ {{>UnitPrice}}"></column>
</columns>
</ig-grid>
この機能を使用するには、ページ上で jsRender スクリプトを参照する必要があります。これは、その他のコントロールに影響がないという点に注意してください。その他のコントロールのテンプレートはデフォルトで Ignite UI for jQuery によって処理され、デフォルトの構文に従います。jsRender は二重の波括弧を多く使用するため、Angular との競合を避けるために前述した同じ手法を適用します。さらに、ディレクティブ内のネストされたオプションであっても、追加のマークアップや書式設定のない単一のプロパティ (template="{{>UnitPrice}}" など) の代入として評価する式と認識されます。
関連サンプル:jsRender の結合
その他のカスタマイズ オプションが使用できない高度なシナリオでは、メインのテンプレート関数をオーバーライドすることもできます。この機能は Ignite UI for jQuery 14.1 以降のバージョンでのみ可能です。tmpl は Infragistics テンプレート エンジンのメイン関数です。$.ig 名前空間オブジェクトの下でグローバルに定義されています。この関数は関連するすべての Ignite UI for jQuery コントロールによって呼び出され、テンプレートとデータ オブジェクトの両方を受け取ります。
JavaScript の場合:
$.ig.tmpl = function (template, data) {
/* handle the templating process */
return template;
};
注: テンプレート関数は結果を文字列で返します (HTML 文字列を DOM に挿入する前に HTML 全体を作成する方が実行ごとにオブジェクトを作成する方法よりも優れています)。返される結果のタイプとパラメーターはコントロールによって処理されるため、変更しないでください。
この時点でのテンプレート化は様々な方法で処理されます。完全なカスタム実装や、パラメーターを使用してHandlebars や Mustache などの他のエンジンにテンプレート関数を渡す方法もあります。構文によって、デフォルトのテンプレートのすべての制約が有効になる場合があります。
Angular の構文を使用する場合、html で式を評価する方法として、コンパイルおよびサービスの補完の 2 つの方法があります。テンプレート関数の文字列出力要件によって、実質的に $compile サービスをカスタム テンプレートのオプションから除外します (コンパイルされたテンプレートやリンクされたテンプレートをアクティブ化する時間がないため)。また、$interpolate サービスはマークアップ内の式を即座に評価し、値を直接置換します。そのようなテンプレート ソリューションを作成するには、グローバル関数からアクセスできる $scope リファレンスが必要です。また、渡されたデータ項目を Angular アプリケーションのスコープ内で一致させ評価できるようにする必要がありますが、描画するごとにスコープ メソッドからロジックを実行することはできます。
注: テンプレート関数のオーバーライドは、アプリケーション内のすべてのアクティブな Ignite UI for jQuery コントロールに適用されるため、新しい関数が Ignite UI for jQuery コントロール以外のコントロールのテンプレートも処理できなければならないことに注意してください。テンプレート エンジンの変更は、すべてのコントロールのテンプレートを変更し、新しい構文に一致させる必要があることを意味します。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub