Create multiple ports in javascript loop

GoJS
1

Hello GoJS users,

I’m new to GoJS (and neophyte to Javascript) and i’m searching to create a node template with an undetermined number of ports, but I have a problem doing this, I’ll explain better within the code.

var templates = $(go.Node, "Spot", nodeStyle(),
      $(go.Shape, "Rectangle", shapeStyle(),
        { fill: green }),
      $(go.TextBlock,
	      "Hello world",  
	      { margin: 12, stroke: "white", font: "bold 16px sans-serif", textAlign: "center" },
	      new go.Binding("text", "key")));
	      
   //So here I have a base example template for the node, but without any port.

   //Now the loop, with a random number    
    for (i = 0; i < randomNumber; i++) { 
    	var port = $(go.Shape, "Rectangle", portStyle(true),
            { portId: "in"+i, alignment: new go.Spot(0, i/randomNumber) });
            //Here I want to associate "port" with the variable template
            //But I have absolutely no idea how to, anyone know?
    }

I’m still unable to find this kind of example on the internet, I hope to find some hints here. Thanks.

[Edit] : Just found this example :

var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "lightblue";

This is interesting, i’ll give it a try, tutorials were so focused on building with GraphObject.make I didn’t knew until now I could do it, I find this formulation far more comfortable.

2

Have you seen this sample: Dynamic Ports ? That has four independent sets of ports (one for each side of the node), where each port has data bound properties.

There are other samples that use that mechanism (binding Panel.itemArray, defining Panel.itemTemplate) to do similar things, such as in: Pipes.

3

I’ve seen the “dynamicPorts” samples but not “Pipes”. And this one is close to the final result I need to do, thanks for sharing.