The constructor creates a Theme binding, where the source value is looked up by the ThemeManager..
Optionaltargetprop: stringA string naming the target property on the target object. This should not be the empty string.
Optionalsourceprop: stringA string naming the source property, which could be on the Theme, data object, GraphObject, or shared model data object. If this argument is not supplied, the source property is assumed to be the same as the target property.
OptionalthemeSource: string | nullThe source object on the Theme to find the value for the source property name. If this argument is null or not supplied, the empty string is used.
Optionalconv: TargetConversionA side-effect-free function converting the source property value to lookup in the Theme. If the function is null or not supplied, no conversion takes place.
OptionalthemeConverter: TargetConversionAn optional side-effect-free function converting the theme value to the value to set the target property. If the function is null or not supplied, no conversion takes place.
Gets or sets a converter function to apply to the GraphObject property value in order to produce the value to set to a data property. This conversion function is only used in a TwoWay binding, when transferring a value from the target to the source. The default value is null -- no conversion takes place. Otherwise the value should be a function that takes one or two arguments and returns the desired value. However, the return value is ignored when the sourceProperty is the empty string.
Conversion functions must not have any side-effects other than setting the source property.
The function is passed the value from the target (the first argument), the source Panel.data object (the second argument), and the Model (the third argument). If the sourceProperty is a property name, that property is set to the function's return value. If the sourceProperty is the empty string, the function should modify the second argument, which will be the source data object.
Gets or sets a converter function to apply to the data property value in order to produce the value to set to the target property. This conversion function is used in both OneWay and TwoWay bindings, when transferring a value from the source to the target. The default value is null -- no conversion takes place. Otherwise the value should be a function that takes one or two arguments and returns the desired value. However, the return value is ignored when the targetProperty is the empty string.
Conversion functions must not have any side-effects other than setting the target property. In particular you should not try to modify the structure of the visual tree in the target GraphObject's Part's visual tree.
The function is passed the value from the source (the first argument) and the target GraphObject (the second argument). If the targetProperty is a property name, that property is set to the function's return value. If the targetProperty is the empty string, the function should set a property on the second argument, which will be the target GraphObject.
ReadonlyisThis read-only boolean property returns true if this is a data binding.
since3.0
ReadonlyisThis read-only boolean property returns true if this binding is to a Model.modelData source.
see
ReadonlyisThis read-only boolean property returns true if this binding is to a GraphObject source.
see
since3.0
ReadonlyisThis read-only boolean property returns true if this binding is a ThemeBinding.
since3.0
Gets or sets the directions and frequency in which the binding may be evaluated. The default value is BindingMode.OneWay. BindingMode.TwoWay is the other choice.
Use OneWay bindings to initialize GraphObject properties based on model data, or to modify GraphObject properties when the model data changes with a call to Model.set. Use TwoWay bindings to keep model data in sync with changes to GraphObject properties. For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
You should not have a TwoWay binding on a node data object's key property.
ThemeBindings cannot be TwoWay.
Gets or sets the name of the GraphObject that should act as a source object whose property should be gotten by this data binding. The default value is null, which uses the bound Panel.data as the source. If the value is a string, it should be the name of a GraphObject in the visual tree of the Panel that is bound to the data. Use the empty string to refer to the root panel, which is typically the whole Node or Link, but will be a Panel if used in a Panel.itemTemplate. The name must not contain a period.
Binding only works if the source property is settable, not on computed or read-only properties, and if it supports notification. The documentation for the GraphObject (or subclass of GraphObject) property will indicate if the property is settable and if it does not notify.
defaultValuenull -- the bound Panel.data is the source
see
Gets or sets the name of the property to get from the bound data object, the value of Panel.data. The default value is the empty string, which results in setting the target property to the whole data object, rather than to a property value of the data object. If sourceName is not null, then this property names the settable property on the GraphObject or RowColumnDefinition that acts as the source.
Gets or sets the name of the property to be set on the target GraphObject. The default value is the empty string; you should set this to be the name of a property.
Gets or sets a converter function to apply to the theme property value in order to produce the value to set to the target property. The default value is null -- no conversion takes place. Otherwise the value should be a function that takes one or two arguments and returns the desired value.
Conversion functions must not have any side-effects.
The function is passed the value from the theme (the first argument) and the target GraphObject (the second argument). The targetProperty is set to the function's return value.
since3.0
Gets or sets the source sub-object on a Theme for a lookup.
This can be used to refine where in the Theme to look, sometimes useful to avoid the need for a conversion function.
{
colors: {
gender: {
M: 'blue',
F: 'pink'
}
}
}
...
myDiagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape()
// assign Shape.fill to theme.colors.gender[data.sex]
.themeData("fill", "sex", "gender"),
...
)
defaultValue'' -- the theme will be be searched without any additional object constraint
VirtualcopyCreate a copy of this Binding, with the same property values.
Modify this Binding to set its mode to be BindingMode.TwoWay, and provide an optional conversion function to convert GraphObject property values back to data values, as the value of backConverter.
Use TwoWay bindings to keep model data in sync with changes to GraphObject properties. For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app. It is typical only to use TwoWay bindings on properties that are modified by tools or commands. Examples include Part.location by DraggingTool and TextBlock.text by TextEditingTool (only if TextBlock.editable is true).
You should not have a TwoWay binding on a node data object's key property.
ThemeBindings do not support TwoWay binding.
Optionalbackconv: BackConversionthis two-way Binding.
Modify this Binding so that the source is the Model.modelData object, not a regular node data object or another GraphObject in the Part.
this Binding to the Model.modelData object.
Modify this Binding to set its sourceName property so as to identify a GraphObject in the visual tree of the bound Panel as the data source, instead of the Panel.data as the data source.
This permits data binding on GraphObject properties, such as Part.isSelected. Remember that you can reliably data bind only on settable properties, not on read-only or computed properties.
Optionalsrcname: stringthe GraphObject.name of an element in the visual tree of the bound Panel; use an empty string to refer to the root panel of that visual tree, whose Panel.data is the bound data.
this Binding to another GraphObject.
see
StaticparseThis static function can be used to create a function that parses a string into an enumerated value, given the class that the enumeration values are defined on and a default value if the string cannot be parsed successfully.
The normal usage is to pass the result of this function as the conversion function of a Binding.
linktemplate.bind('routing', 'dataPropName', go.Binding.parseEnum(go.Link, go.Routing.Normal));
This binding will try to parse the string that is the value of the bound data's "dataPropName" property. If it is a legitimate enumerated value defined on the Link class, the conversion function will return that value. If the bound data's "dataPropName" property is not present or has an unrecognized value, the Link.routing property gets the default value, Routing.Normal.
Note that this method has been deprecated as enums should no longer need conversion functions and can just be saved/loaded as numbers. It remains for compatibility with old saved models.
the class constructor that defines the enumerated values that are being parsed.
the default enumerated value to return if it fails to parse the given string.
a function that takes a string and returns an enumerated value.
deprecatedInstead, save/load as enum number values with no conversion.
StatictoThis static function can be used to convert an object to a string, looking for commonly defined data properties, such as "text", "name", "key", or "id". If none are found, this just calls toString() on it.
Optionalval: anyStatic ReadonlyOnedeprecatedSee BindingMode.OneWay.
Static ReadonlyTwodeprecatedSee BindingMode.TwoWay.
A ThemeBinding describes how to automatically set a property on a GraphObject to a value of a property in a Theme. ThemeBindings are just like regular Bindings, except they add a step to lookup a name in a Theme. The target property name and the data source property name must be strings. All name matching is case-sensitive.
Register theme bindings by calling GraphObject.theme or another method whose name starts with "theme".
For example, your theme might be like:
Your simple node template might be like:
The theme binding causes the Shape.fill property of the Shape to be set to the value of the theme's "primary" property. If the value of the "primary" property of a particular theme object is undefined, the binding is not evaluated: the target property is not set. If there is an error with the theme binding, you may see a message in the console log. For this reason you may want to explicitly set the initial value for a property when defining the GraphObject, since that value will remain as the default value if the ThemeBinding is not evaluated.
Just like Bindings, it's possible to use different source objects. The typical source is the Theme itself, but one can also use a property of a data object in the model. another GraphObject in the same Part, or the shared JavaScript object that is the value of Model.modelData. The values from these other sources are then used to perform the property lookup in the Theme object. To use these other sources, one can call GraphObject.themeData, GraphObject.themeObject, or GraphObject.themeModel. Or modify the Binding by calling ofData, Binding.ofObject, or Binding.ofModel.
Note that ThemeBindings are always OneWay.
Existing bindings become read-only, and no new bindings may be added, when a template (a Part) is copied. Bindings will be shared by all copies of the template's GraphObjects.
For more information about bindings see Binding documentation. For more information on theming, see the Theming learn page.
since3.0