個人認為方便的自定義模板是GoJs的強大功能之一,使用nodeTemplateMap可以很方便地定義各種類型的模板,只要在數據模型中指定模板的名稱(使用category),就可以顯示相應的圖形。nodeTemplateMap的使用方法如下:
myDiagram.nodeTemplateMap.add("End",
part
);
這里,part就是顯示的模板,比如,下面是一個part的定義,顯示狀態圖的開始節點:
var partStart= $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Circle",
{
fill: "#52ce60", /* green */
stroke: null,
portId: "",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$(go.TextBlock, "開始",
{
font: "bold 16pt helvetica, bold arial, sans-serif",
stroke: "whitesmoke"
})
);
對應的數據如下:
{"id":-1, "loc":"155 -138", "category":"Start"}
數據中,category指定了模板類型,loc綁定到圖元的位置,這里是雙向綁定,也就是圖元位置的變化,會改變數據模型中的數據。
如果只定義通用的模板,可以使用:
myDiagram.nodeTemplate=part;
這種情況下,沒有指定category的數據都采用缺省模板顯示。