# Class ThemeBinding

GoJS® Diagramming Components
version 3.0.7
by Northwoods Software®

#### Hierarchy

- Binding
  - ThemeBinding

A ThemeBinding describes how to automatically set a property on a GraphObject to a value of a property 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:

    { colors: { primary: 'red' } }

Your simple node template might be like:

      myDiagram.nodeTemplate =
        new go.Node("Auto").add(
          new go.Shape().theme("fill" , "primary"),
          new go.TextBlock("Hello", { font: "bold 11pt sans-serif" })
        );

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 intro page.

`since`

3.0

#####
Index

### Constructors

constructor

### Accessors

themeConverter
themeSource

### Methods

ofData

#####
Inherited Index

### Accessors

Binding.backConverter
Binding.converter
Binding.isToData
Binding.isToModel
Binding.isToObject
Binding.isToTheme
Binding.mode
Binding.sourceName
Binding.sourceProperty
Binding.targetProperty

### Methods

Binding.copy
Binding.makeTwoWay
Binding.ofModel
Binding.ofObject
Binding.toString

## Constructors

### constructor

- new ThemeBinding(targetprop?: string, sourceprop?: string, themeSource?: string, conv?: ((val: any, targetObj: any) => any), themeConverter?: ((val: any, targetObj: any) => any)): ThemeBinding

- The constructor creates a Theme binding, where the source value is looked up by the ThemeManager..

  #### Parameters

  - ##### `Optional` targetprop: string

    A string naming the target property on the target object. This should not be the empty string.

  - ##### `Optional` sourceprop: string

    A 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.

  - ##### `Optional` themeSource: string

    The 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.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    A 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.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` themeConverter: ((val: any, targetObj: any) => any)

    An 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.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  #### Returns ThemeBinding

## Accessors

### themeConverter
: ((val: any, targetObj: any) => any)

- 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.

  `since`

  3.0

### themeSource
: string

- Gets or sets the source 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: {
          sex: {
            M: 'blue',
            F: 'pink'
          }
        }
      }
      ...
      myDiagram.nodeTemplate =
        new go.Node("Auto").add(
          new go.Shape().themeData("fill", "sex", "sex"),  // lookup the "sex" data value in the "sex" Theme object
          ...
        )

  `defaultValue`

  `''` -- the theme will be be searched without any additional object constraint

## Methods

### ofData

- ofData(): Binding

- Modify this ThemeBinding so that the source is a data object.

  Note that one can also call ofObject or ofModel as ThemeBinding is a subclass of Binding.

  #### Returns Binding

  this ThemeBinding with a data object source.

  `see`
  - ofObject
  - ofModel

Copyright © 1998-2024 by Northwoods Software Corporation.