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