脚本宝典收集整理的这篇文章主要介绍了GoJS 绘图 (八) ：模型和模版，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
使用模版构视图
让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式：
@H_406_5@
VAR node1 = g(
go.Node,
'Auto',
g(
go.Shape,
{
fill: '#493'
}
),
g(
go.TextBlock,
{
text: 'node1'
}
)
);
diagram.add(node1);
var node2 = g(
go.Node,
'Auto',
g(
go.ShaPE,
{
fill: '#943'
}
),
g(
go.TextBlock,
{
text: 'node1'
}
)
);
diagram.add(node2);
diagram.add(g(
go.Link,
{
FromNode: node1,
toNode: node2
},
g(
go.Shape
)
));事实上，图已经为节点和链接非常简单的默认模板。如果您想自定义您的图表中的节点的外观，你可以通过设置替换默认节点模板Diagram.nodeTemplate。
让我们创建一个图表，提供必要信息。该特定节点的数据已投入JavaScript对象的数组。我们声明在链路的数据对象一个单独的数组链接关系。每个链路数据，通过使用他们的密钥保存到所述节点的数据。通常情况下，引用“from”和“to”属性的值。
var nodeDataArray = [
{ key: "Alpha"},
{ key: "Beta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);一般节点不会使用默认方式。因此，我们需要替换节点模版：Diagram.nodeTemplate。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ figure: "RoundedRectangle",
fill: "whITe" }),
$(go.TextBlock,
{ text: "hello!",
margin: 5 })
);
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);现在图看起来更好，但节点没有参数 - 他们都是相同的！我们可以实现通过使用数据绑定。
数据绑定是一种声明声明一个对象的属性值应该用于设置另一个对象的属性值。
在这种情况下，我们要确保TextBlock.text属性获取相应的节点数据的“key”。我们要确保的Shape.fill属性被设置为相应的节点数据的“color”属性值给出的颜色。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ figure: "RoundedRectangle",
fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "pink" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
以上是脚本宝典为你收集整理的GoJS 绘图 (八) ：模型和模版全部内容，希望文章能够帮你解决GoJS 绘图 (八) ：模型和模版所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。