Bindung definieren

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.