Bind a value from a hierarchical model

GoJS
1

Imagine a model like :

{ key: 'My little key', color: '#FF0000' }

To bind color, it’s very simple with :

new go.Binding('portId', 'portId'),

But In case where this “color” is encapsuled in a hierarchical structure like :

{ key: 'My little key', 
   sublevel: {
      sublevel: {
          color: '#FF0000'
      }
   }

How to bind it ?

2

I assume your example was meant to be something like:

    new go.Binding("stroke", "color")

I’m sorry that there is no built-in support for binding to sub-properties. It would certainly be natural and convenient to use a “dotted” property path in order to specify a source that is a property on the object value of a data property.

But it is quite achievable. Look at this sample: Binding data sub-properties. It’s node template includes this:

    $(go.Shape, makeSubBinding("stroke", "color"), ...)

Note that the makeSubBinding function assumes that the source property will be on the object that is the value of the data.details property. But you could generalize the code to work on supplied property names and on nested data objects.

Caution: if you’re not comfortable dealing with functions and closures, the code might be a bit confusing.