GoJS 绘图 (八) ：模型和模版

使用模版构视图

让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式：

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);