流程圖控件GoJS教程：數據綁定（上）

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS現已更新至最新版本2.0.16發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

數據綁定是一種從源對象提取值并在目標對象上設置屬性的方法。目標對象通常是GraphObject；源對象通常是模型中保存的JavaScript數據對象。

您可以編寫代碼，從模型數據中獲取所需的值，在圖上搜索適當的部件， 在該部件的可視樹中搜索目標GraphObject，然后使用該值在該GraphObject上設置一個或多個屬性，也許在以適合各個屬性的方式修改或轉換原始值之后。但是，數據綁定提供了一種聲明性的方式來指定這種行為，僅通過提供一個 Binding即可命名源對象和目標對象上的屬性。

嘗試綁定GraphObject的不存在屬性可能會導致警告或錯誤，您可以在控制臺日志中看到該警告或錯誤。始終檢查控制臺日志中是否存在綁定系統通常禁止的任何潛在異常。

零件與數據的關系以及綁定

首先，查看一個圖，其中包含有關用于構建一些示例節點和鏈接的GraphObjects的注釋：

兩個Node和一個Link屬于該圖，位于左側，帶有陰影。所述的TreeModel并在其兩個數據對象Model.nodeDataArray是在右側，為灰色。

每個節點和鏈接都有一個Panel.data屬性，該屬性引用模型中的數據對象。因此，給定一個節點，可以很容易地引用您在模型中的數據上放置的所有數據屬性。這些參考被繪制為灰色鏈接。

每個節點還具有三個Binding，用綠色虛線繪制：

• 從屬性到Part.locationdata.location屬性

• 從屬性到Shape.filldata.color屬性

• 從屬性到TextBlock.textdata.text屬性

模板和數據綁定的使用大大簡化了必須存儲在模型數據中的信息，并允許以獨立于模型數據的各種方式表示節點和鏈接時具有極大的靈活性。但是并非所有數據屬性都需要在模板的綁定中使用。

需要注意的是綁定為不是從數據到任何引用部分。將模型與圖表分開的全部目的是避免從數據引用圖表或節點或鏈接或工具。唯一的引用從圖到模型是Diagram.model屬性，每個節點或鏈路的Panel.data屬性。

綁定字符串和數字屬性

將GraphObject屬性綁定到數據屬性很容易。在此示例中，我們不僅將節點中的TextBlock.text和Shape.fill綁定到節點數據的屬性值，而且對于較粗的彩色線，我們還將鏈接中的Shape.stroke和Shape.strokeWidth綁定到鏈接數據的屬性值。

您需要做的就是在目標GraphObject上添加一個新的Binding，該綁定在視覺對象上命名為target屬性，在數據對象上命名為source屬性。當然，目標屬性必須是可設置的屬性。某些GraphObject屬性不可設置。如果指定的目標屬性名稱不存在，您將在控制臺中收到警告消息。如果源屬性值未定義，則不評估綁定。

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },        new go.Binding("fill", "color")),  // shape.fill = data.color
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))  // textblock.text = data.key
    );

  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape,        new go.Binding("stroke", "color"),  // shape.stroke = data.color
        new go.Binding("strokeWidth", "thick")),  // shape.strokeWidth = data.thick
      $(go.Shape,
        { toArrow: "OpenTriangle", fill: null },        new go.Binding("stroke", "color"),  // shape.stroke = data.color
        new go.Binding("strokeWidth", "thick"))  // shape.strokeWidth = data.thick
    );  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "pink" }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta", color: "blue", thick: 2 }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

請注意，有兩個使用源鏈接數據的“顏色”屬性的綁定。鏈接模板中的每個目標Shape都有一個。每個都綁定Shape.stroke屬性。

綁定對象屬性，例如Part.location

您還可以對具有對象值的屬性進行數據綁定。例如，數據綁定Part.location屬性是很常見的。

Part.location的值是Point，因此在此示例中，data屬性必須是Point。

diagram.nodeTemplate =
    $(go.Node, "Auto",      new go.Binding("location", "loc"),  // get the Node.location from the data.loc value
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))
    );  var nodeDataArray = [    // for each node specify the location using Point values
    { key: "Alpha", color: "lightblue", loc: new go.Point(0, 0) },
    { key: "Beta", color: "pink", loc: new go.Point(100, 50) }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

為簡潔起見，其余這些示例都使用默認的Diagram.linkTemplate。

轉換功能

但是，如果您希望位置的數據屬性值不是Point，該怎么辦？您可以提供將實際數據屬性值轉換為所需值類型或格式的轉換功能。

對于此類示例，Point類包含一個靜態函數Point.parse，您可以使用該函數 將字符串轉換為Point對象。它期望輸入字符串中有兩個數字，分別代表Point.x和Point.y值。它返回具有這些值的Point對象。

您可以將轉換函數作為第三個參數傳遞給Binding構造函數。在這種情況下，它是Point.parse。這允許以字符串（“ 100 50”）的形式而不是作為返回Point的表達式來指定位置。對于模型對象的數據屬性，您通常會希望使用字符串作為 Points, Sizes, Rects, Margins, 和Spots, 而不是引用這些類的對象。 可以輕松地以JSON和XML讀寫字符串。 嘗試讀取/寫入對象類將占用額外的空間，并且需要編寫者和閱讀者雙方進行額外的合作。

 diagram.nodeTemplate =
    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),  // convert string into a Point value
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))
    );  var nodeDataArray = [
    { key: "Alpha", color: "lightblue", loc: "0 0" },  // note string values for location
    { key: "Beta", color: "pink", loc: "100 50" }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

轉換函數可以是命名函數或匿名函數。它們采用數據屬性值，并返回適合所設置屬性的值。它們不應有任何副作用。他們可能以任意順序被多次調用。

這是一個示例，其中有多個Shape屬性數據綁定到同一個名為“ highlight”的布爾數據屬性。每個轉換函數均采用布爾值，并為數據綁定的屬性返回適當的值。通過將“ highlight”數據屬性設置為false或true，從數據控制每個節點的外觀變得很簡單。

 diagram.nodeTemplate =
    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle",
        { // default values if the data.highlight is undefined:
          fill: "yellow", stroke: "orange", strokeWidth: 2 },        new go.Binding("fill", "highlight", function(v) { return v ? "pink" : "lightblue"; }),        new go.Binding("stroke", "highlight", function(v) { return v ? "red" : "blue"; }),        new go.Binding("strokeWidth", "highlight", function(v) { return v ? 3 : 1; })),
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))
    );  var nodeDataArray = [
    { key: "Alpha", loc: "0 0", highlight: false },
    { key: "Beta", loc: "100 50", highlight: true },
    { key: "Gamma", loc: "0 100" }  // highlight property undefined: use defaults
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

請注意，轉換函數只能返回屬性值。您不能返回GraphObjects來替換零件可視樹中的對象。如果需要根據綁定數據顯示不同的GraphObject，則可以綁定GraphObject.visible或GraphObject.opacity屬性。如果您確實想要不同的視覺結構，則可以使用多個模板（Template Maps）。

=====================================================

想要購買GoJS正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼