Upgrade reports error in empty ref binding

GoJS
1

I’ve just upgraded the version of go.js I’m using following a license purchase and am getting some errors relating to the binding I have on a link that allows me to check if the link is to/from a specific category of item [namely a comment - whereby I remove the arrows from the line).

I’ve highlighted the line below. this is giving the error:

</font> <font face="Courier New, Courier, mono" color="#ff0000">Binding error: undefined target property: on Shape(None)#{all link shape id's}</font> <font face="Courier New, Courier, mono" color="#ff0000">

The offending binding is

<span style="font-family: 'Courier New', Courier, mono; font-size: small; line-height: 18.2000007629395px; : rgb248, 248, 252;">}, </span><b style="font-family: 'Courier New', Courier, mono; font-size: small; line-height: 18.2000007629395px; : rgb248, 248, 252;"><font color="#ff0000">new go.Binding("", "", function(obj) { linkClick(obj);</font></b><span style="font-family: 'Courier New', Courier, mono; font-size: small; line-height: 18.2000007629395px; : rgb248, 248, 252;"> })

The LinkTemplate for the link is:


<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;">myDiagram.linkTemplate =</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">	</span>$$(go.Link, // the whole link panel</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>{</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			</span>routing: go.Link.AvoidsNodes</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>curve: go.Link.JumpOver</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>corner: 5</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>toShortLength: 4</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>relinkableFrom: isAdmin</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>relinkableTo: isAdmin</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>reshapable: isAdmin</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>selectable: isAdmin</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>},</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>$$(go.Shape, // the link path shape</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			</span>{</span></font><span ="apple-tab-span"="" style="line-height: 18.2000007629395px; font-family: 'Courier New', Courier, mono; font-size: small; white-space: pre;">	</span><span style="line-height: 18.2000007629395px; font-family: 'Courier New', Courier, mono; font-size: small;">isPanelMain: true</span>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">				</span>,</span></font><span style="line-height: 18.2000007629395px; font-family: 'Courier New', Courier, mono; font-size: small;">strokeWidth: linkArrowWidth</span>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			</span>}, <b><font color="#ff0000">new go.Binding("", "", function(obj) { linkClick(obj);</font></b> })</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>),</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>$$(go.Shape, // the arrowhead</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>{</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			</span>toArrow: linkArrowHeadType</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>stroke: linkArrowHeadStroke</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">			,</span>fill: linkArrowHeadFill</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">		</span>})</span></font>
<font face="Courier New, Courier, mono" size="2"><span style="line-height: 18.2000007629395px;"><span ="apple-tab-span"="" style="white-space:pre">	</span>);</span></font>

If I just remove the line then I can’t apply the category I need to style the line on reloading – are there any safe binding options? (and where should I have looked in the documentation?)

UPDATE:

After trying various logical hooks I happened upon the following:

new go.Binding(“click”, “click”, function(obj) { linkClick(obj);

Now I don’t get any errors. Although I get warned of any errors and the functionality seems intact - I wondered if this will negate me using anything with an onclick functionality later (although I guess? i’d just append this to the linkClick event)…

Thanks
Dylan

2

What does your linkClick function do? And what version were you using before?
Having no source property name means the Binding will get evaluated whenever there is a change to the data. Having no target property name means there is no automatic assignment of any property – the conversion function needs to do the assignment. But since your conversion function ignores the second argument, it will not have access to the Shape element.

3

So my linkClicky detects if we’re dealing with a “comment” and then applies the category to the link so it can have the correct template applied (only on reloading - but acceptable if the absence of a better way)

                        function linkClick(obj) {
                            // detect if we are linking to/form a comment port - if so set the category so
                            //   on next load the line will be formatted according to the CommentLink linkTemplateMap
                            if (obj.toPort != null && (obj.toPort.indexOf("PortComment") == 0)) {
                                debug('debug', 'CONNECTING TO A COMMENT');
                                obj.category = 'CommentLink';
                            }
                        }

The previous version was v1.3.10 (the client took a long time to evaluate and OK the project ;) )

It was and is functional in that the value gets assigned so the linkClick is being triggered. It’s just htat now I see the warning/error I realise there must be a ‘right’ way to do this.

4

I haven’t confirmed this, but I think we added the message to help improve the Bindings that programmers use. I’m surprised that your code actually works.

So your link data do not have a “category” property and you want to automatically assign it? You could override this (not yet documented) method on Diagram:

myDiagram.getCategoryForLinkData = function(data) {
if (data.toPort !== null && data.toPort.indexOf(“PortComment”) === 0) return “CommentLink”;
return go.Diagram.prototype.getCategoryForLinkData.call(this, data);
};