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