Binding to ofObject() in itemArray

GoJS
1

I am using the Dynamic Ports sample and want to show the top ports only when the node is selected.
This is just an example if the issue I face but it illustrates the problem.
I am trying to bind to the isSelected property of the node in an itemArray as follows:

 // the Panel holding the top port elements, which are themselves Panels,
    // created for each item in the itemArray, bound to data.topArray
    $(go.Panel, "Horizontal",
      new go.Binding("itemArray", "topArray"),
      { row: 0, column: 1,
        itemTemplate:
          $(go.Panel,
            { _side: "top",
              fromSpot: go.Spot.Top, toSpot: go.Spot.Top,
              fromLinkable: true, toLinkable: true, cursor: "pointer",
              contextMenu: portMenu },
            new go.Binding("portId", "portId"),
            $(go.Shape, "Rectangle",
              { stroke: null, strokeWidth: 0,
                desiredSize: portSize,
                margin: new go.Margin(0, 1) },
              new go.Binding("fill", "portColor")),
              //Here We Go!
	  new go.Binding("visible", "isSelected", function(sel) {
		return sel;
	  }).ofObject(),
          )  // end itemTemplate
      }
    ),  // end Horizontal Panel

To my way of thinking, the top ports should now only be visible when the node is selected.
I know that if I bind to the parent panel that this works to show/hide the whole array.
But as I mentioned earlier this is only an example of the issue I face.
What am I missing?

2

This may be a case where you need to use a “ChangedSelection” listener, but we’ll think about other options.

3

You could try something like this on the parent panel:

new go.Binding("", "isSelected", function (sel, obj) {
  obj.elements.each(function(elt) {
    elt.opacity = sel ? 0 : 1;
  });
}).ofObject(),

That way, you get access the the elements of the itemArray and can update those properties.

4

Thanks!
I will try that.