テンプレート内にバインディングを定義するには、バインディングのソース・プロパティー名を二重中括弧 {{ }} でくくります。
これを引用符で囲んで、バインディングのターゲット・プロパティーのストリング値とします。
例えば、テキスト形状の
text
プロパティーをノードの label
プロパティーにバインドするには、次のようにします。shape:{type:'text', text:'{{label}}' }
ターゲット・プロパティーの数値として表現したい数値データ型のソース・プロパティーをバインドするには、テンプレート・パラメーターを JavaScript オブジェクト・プロパティーとして適用する必要があります。
JavaScript オブジェクト・プロパティーとしてのパラメーターの定義を参照してください。
バインディングのソース
バインディングのソースには、以下のものがあります。
- Java プロパティー命名規則に従うターゲット・オブジェクトのプロパティー。'foo' プロパティーの場合、getFoo() メソッドがなければなりません。このプロパティーは、バインド可能プロパティーと呼ばれます。
- ターゲット・オブジェクトの public プロパティー。
- ターゲット・オブジェクトのメソッド。text:'node {{getId}}' など。
- データ・ストア項目の属性。データ・ストア項目へのバインディングのセクションを参照してください。
バインディング・エンジンは、
a.b.c.
の形式のチェーニングされたプロパティーをサポートしています。a、b、および c は、サポートされるバインディング・ソースのいずれかに対応しています。例えば、以下のプロパティーは、ノード境界の幅を表示します。text:'{{getBounds.width}}'
データ・ストア項目へのバインディング
Diagram ウィジェットを使用して、データ・ストアに接続し、グラフにデータ追加する場合、ノードの
data
プロパティーによって、データ・ストア項目のプロパティーへのバインディングを定義できます。このプロパティーは、データ・ストア項目から作成されたノードに関連付けられるデータ・コンテキストを定義します。
バインディングで data
プロパティーを使用する場合、それは基礎となるデータ・ストア API のショートカットになり、データ項目属性への直接参照を行うことができます。例えば、ライブラリーのデータ・ストアには、以下の項目が追加されることが考えられます。
{ author: ..., title: ..., ISBN:... }
以下のテンプレートは、タイトル (title) と著者 (author) を 2 つのテキスト形状で表示します。
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.title}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
データ項目属性に加えて、データ・ストア・バインディングは、dojo.data.api のメソッドを参照することもできます。サポートされるメソッドは、以下のとおりです。
- getIdentity
- getLabel
- getAttributes
例えば、テンプレートを変更してそのタイトルの代わりにデータ項目の ID を表示するようにできます。
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.getIdentity}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
バインディング・エンジンは、Django テンプレート言語 (DTL) に基づいているため、DTL の Dojo 実装がサポートするあらゆる高度な機能を使用することができます。例えば、以下のテンプレートは、ループ・スクリプトに DTL を使用しています。これは、ユーザー定義の members プロパティー (配列として定義) を繰り返し、配列で各項目のテキスト形状を作成します。形状は、StackLayout レイアウトにより、垂直スタックに自動的に配置されます。
ibm_ilog.diagram.declareTemplate("{ layout:{type:'ibm_ilog.diagram.gfxlayout.GridLayout'}, children:[{ shape:{ type:'rect', width:1, height:1 }, fill: '{{backgroundColor}}', stroke: {'color': 'black', 'width': 2 } }, { layout:{ type:'ibm_ilog.diagram.gfxlayout.StackLayout', horizontal:false, gap:3, padding:[5,5,5,5]}, children:[ {% for m in members %} { shape:{ type:'text', text:'{{m}}', align:'middle' }, fill:'{{textColor}}', font:{type:'font', size:'10pt', family:'sans-serif'} } {% if not forloop.last %},{% endif %} {% endfor %} ] } ] }");
JavaScript オブジェクト・プロパティーとしてのパラメーターの定義
前のセクションの例では、すべてのバインディング・パラメーターがストリングとして表現されています。
バインディング定義に使用された構文、
{{ ... }}
は、JavaScript に準拠せず、したがって、テンプレートが簡潔な JavaScript オブジェクトとして作成できない可能性があります。これは、バインディング式が引用符で囲まれていれば、すなわち、バインディングを受け取る変数が
text: '{{label}}'
などのストリングを想定している場合は問題ではありません。バインドされたパラメーターを x: {{elemWidth}} + 10
などストリング以外にする場合は、ブロッキングの問題になります。ここでは、一般的に elemWidth
パラメーターを数値データ型としてターゲット・オブジェクトに渡すことを考えます。すべてのテンプレート・パラメーターをストリングとして表現できる場合でも、複合テンプレートの作成が厄介になる可能性があります (複数行ストリングのテンプレートなど)。また、テンプレート自体の構文エラーの検出が難しいことがあり、エラーを含みやすくなります。これらの問題を避けるには、テンプレート・パラメーターを JavaScript オブジェクトとして表現し、テンプレーティング・エンジンの $bind() グローバル関数を使用して引用符で囲めないバインディングを定義します。
例えば、
abscissa
および ordinate
プロパティーが、テンプレートが適用されるオブジェクトに定義され、これらのプロパティーがグラフ内に形状を配置するために使用する数値を返す場合、テンプレート宣言は以下の例のようになります。var t = ibm_ilog.diagram.declareTemplate({ shape:{ type:'rect', x: $bind("{{abscissa}}"), y: $bind("{{ordinate}}") } }); var node = graph.createNode(t);
declareTemplate 関数の使用
すべてのテンプレートは、ibm_ilog.diagram.declareTemplate() 関数を使用して宣言できます。このオプション関数は、テンプレートが形状に適用される場合にテンプレーティング・エンジンによって使用できるように、テンプレートを処理します。
declareTemplate() 関数で、テンプレートを宣言しない場合、テンプレートは、適用されるたびにテンプレーティング・エンジンによって処理されます。これは、グラフに多数のノードが含まれている場合、パフォーマンスをかなり低下させる可能性があります。
この関数は、あらゆるテンプレートに使用できますが、特にバインディングを定義するテンプレートに使用する必要があります。テンプレートがこの関数で宣言されている場合、テンプレートを変更してはなりません。