Zum Definieren einer Bindung in einer Schablone schließen Sie den Namen der Bindungsquelleneigenschaft
in doppelte geschweifte Klammern {{ }} ein. Setzen Sie diese Angabe für Zeichenfolgewerte der Bindungszieleigenschaft in Anführungszeichen.
Geben Sie beispielsweise Folgendes an, um die Eigenschaft
text
der Textform an die Eigenschaft label
des Knotens zu binden:
shape:{type:'text', text:'{{label}}' }
Wenn Sie eine Quelleneigenschaft an einen numerischen Datentyp binden möchten, den Sie als Zahlenwert
für die Zieleigenschaft ausdrücken möchten, müssen Sie den Schablonenparameter als JavaScript-Objekteigenschaft anwenden.
Weitere Informationen finden Sie unter Parameter als JavaScript-Objekteigenschaften definieren.
Bindungsquelle
Als Quelle einer Bindung können folgende Elemente dienen:
- Eine Eigenschaft des Zielobjekts, die den Namenskonventionen für Java-Eigenschaften entspricht. Für eine Eigenschaft 'foo' muss es eine Methode getFoo() geben.Diese Eigenschaft wird als bindbare Eigenschaft bezeichnet.
- Eine öffentliche Eigenschaft des Zielobjekts.
- Eine Methode des Zielobjekts, z. B. text:'node {{getId}}'.
- Ein Attribut eines Datenspeicherelements. Weitere Informationen finden Sie im Abschnitt Bindung an Datenspeicherelemente.
Die Bindungsengine unterstützt verkettete Eigenschaften im Format
a.b.c.
, wobei a, b und c jeweils einer der unterstützten Bindungsquellen entsprechen.
Die folgende Eigenschaft zeigt beispielsweise die Breite der Knotenränder an:
text:'{{getBounds.width}}'
Bindung an Datenspeicherelemente
Wenn Sie das Diagram-Widget verwenden und eine Verbindung zu einem Datenspeicher herstellen, um einen Graphen zu füllen, können
Sie über die Eigenschaft
data
des Knotens Bindungen an Eigenschaften der Datenspeicherelemente definieren.
Diese Eigenschaft definiert den Datenkontext, der einem aus einem Datenspeicherelement erstellten Knoten zugeordnet ist.
Wenn Sie die Eigenschaft data
in einer Bindung verwenden, ist diese ein Direktaufruf an die zugrunde liegende
Datenspeicher-API, die direkte Referenzen auf Datenelementattribute zulässt.
Ein Bibliotheksdatenspeicher kann beispielsweise mit den folgenden Elementen gefüllt sein:
{ author: ..., title: ..., ISBN:... }
Die folgende Schablone zeigt den Titel und den Autor in zwei Textformen an:
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.title}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
Zusätzlich zu den Datenelementattributen kann eine Datenspeicherbindung auch auf Methoden von
dojo.data.api verweisen.
Die unterstützten Methoden sind im Folgenden aufgeführt:
- getIdentity
- getLabel
- getAttributes
Sie könnten die Schablone beispielsweise wie folgt ändern, so dass die Identität des Datenelements anstelle des Titels angezeigt wird:
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.getIdentity}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
Da die Bindungsengine auf Django Template
Language (DTL) basiert, können Sie alle erweiterten Features verwenden, die die
Dojo-Implementierung von DTL unterstützt. Die folgende Schablone verwendet DTL beispielsweise
für ein Schleifenscript.
Sie iteriert über eine benutzerdefinierte Eigenschaft members (die als Array definiert ist), um
eine Textform für jedes Element im Array zu erstellen.
Die Formen werden vom Layout StackLayout automatisch in einem vertikalen Stapel angeordnet.
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 %} ] } ] }");
Parameter als JavaScript-Objekteigenschaften definieren
In den Beispielen im vorherigen Abschnitt werden alle Bindungsparameter
als Zeichenfolgen ausgedrückt. Die Syntax, die für die Definition der Bindung verwendet wird,
{{ ... }}
, ist mit JavaScript nicht kompatibel und kann deshalb verhindern, dass die Schablone als einfaches
JavaScript-Objekt geschrieben wird. Dies ist kein Problem, wenn der Bindungsausdruck in Anführungszeichen gesetzt ist, d. h., wenn die Variable, die
die Bindung empfängt, eine Zeichenfolge erwartet, z. B.
text: '{{label}}'
.
Ein Problem, dass die Ausführung blockiert, tritt auf, wenn Sie als gebundenen Parameter etwas anderes als eine Zeichenfolge verwenden möchten, z . B.
x: {{elemWidth}} + 10
. In diesem Fall übergeben Sie gewöhnlich den Parameter elemWidth
als
numerischen Datentyp an das Zielobjekt.
Selbst wenn Sie alle Schablonenparameter als Zeichenfolgen ausdrücken können,
kann dies das Schreiben komplexer Schablonen mühsam machen (z. B. bei Schablonen mit mehrzeiligen Zeichenfolgen).
Außerdem ist dieser Ansatz fehleranfällig, weil Syntaxfehler in der Schablone selbst
schwer erkennbar sein können.
Zur Vermeidung dieser Probleme drücken Sie die Schablonenparameter
als JavaScript-Objekte aus und verwenden die globale Funktion $bind()
der Schablonierungsengine, um die Bindungen zu definieren, die nicht in Anführungszeichen gesetzt werden können.
Wenn beispielsweise die Eigenschaften
abscissa
und ordinate
in dem Objekt definiert sind, auf das die Schablone angewendet wird, und diese Eigenschaften eine Zahl zurückgeben,
die Sie verwenden möchten, um die Form im Graphen zu platzieren, könnte die Schablonendeklaration wie folgt aussehen:
var t = ibm_ilog.diagram.declareTemplate({ shape:{ type:'rect', x: $bind("{{abscissa}}"), y: $bind("{{ordinate}}") } }); var node = graph.createNode(t);
Funktion "declareTemplate" verwenden
Alle Schablonen können mit der Funktion ibm_ilog.diagram.declareTemplate() deklariert werden.
Diese optionale Funktion verarbeitet die Schablone so, dass sie von der Schablonierungsengine
verwendet werden kann, wenn sie auf eine Form angewendet wird.
Wenn Sie Ihre Schablone nicht mit der Funktion declareTemplate() deklarieren,
wird die Schablone bei jeder Anwendung von der Schablonierungsengine verarbeitet.
Dies kann sich erheblich auf die Leistung auswirken, wenn Ihr Graph viele Knoten enthält.
Obwohl diese Funktion für jede Schablone verwendet werden kann, muss sie insbesondere für Schablonen verwendet werden, die Bindungen definieren.
Wenn eine Schablone mit dieser Funktion deklariert wurde, darf sie nicht geändert werden.