<svg> attribute height: Expected length, "-Infinity". error

[Edward Wong]

Hi,

I am having an issue getting jsPlumb to draw connectors between elements that are rendered from a template by knockoutJS.

In my afterRender handler function of my knockoutJS template, I am calling jsPlumb to add connectors between the elements created by knockoutJS with the following code:

// Within KnockoutJS afterRender function, forEach element loop

                  jsPlumb.setContainer($("#argumentContainer"));

                    jsPlumb.setSuspendDrawing(true);

                    jsPlumb.ready(function () {

                        var firstInstance = jsPlumb.getInstance();

                        firstInstance.importDefaults({

                            Connector: ["Bezier", { curviness: 50 }],

                            DragOptions: { cursor: "pointer", zIndex: 2000 },

                            PaintStyle: { strokeStyle: "gray", lineWidth: 2 },

                            EndpointStyle: { radius: 9, fillStyle: "gray" },

                            HoverPaintStyle: { strokeStyle: "#ec9f2e" },

                            EndpointHoverStyle: { fillStyle: "#ec9f2e" },

                            Container:$("#argumentContainer")

                        });

                        firstInstance.Defaults.Container = $("#argumentContainer");

                        firstInstance.connect({

                            source: $(currentElement),

                            target: $(currentParentElement)

                        });

                    });

// after forEach loop

jsPlumb.setSuspendDrawing(false, true);

I am getting the following errors in the console:

jsPlumb-2.1.5.js:12883 Error: <svg> attribute width: Expected length, "-Infinity".

jsPlumb-2.1.5.js:12883 Error: <svg> attribute height: Expected length, "-Infinity". 

I have tried running the code above after KnockoutJS has finished processing/rendering and jsPlumb is able to draw the connectors successfully, however according to KnockoutJS, the afterRender callback should be fired after all the elements have been rendered, meaning this shouldn't be a problem.

When I set breakpoints within the code above, I can see that the source and target element exist in the local variable watch during the KnockoutJS afterRender method.

Is there something I'm missing to make this work?

Kind Regards,

Eddie