流程圖控件GoJS教程：數(shù)據(jù)綁定（上）

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

GoJS現(xiàn)已更新至最新版本2.0.16發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

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

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

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

零件與數(shù)據(jù)的關(guān)系以及綁定

首先，查看一個圖，其中包含有關(guān)用于構(gòu)建一些示例節(jié)點和鏈接的GraphObjects的注釋：

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

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

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

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

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

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

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

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

綁定字符串和數(shù)字屬性

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

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

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

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

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

您還可以對具有對象值的屬性進(jìn)行數(shù)據(jù)綁定。例如，數(shù)據(jù)綁定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);

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

轉(zhuǎn)換功能

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

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

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

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

轉(zhuǎn)換函數(shù)可以是命名函數(shù)或匿名函數(shù)。它們采用數(shù)據(jù)屬性值，并返回適合所設(shè)置屬性的值。它們不應(yīng)有任何副作用。他們可能以任意順序被多次調(diào)用。

這是一個示例，其中有多個Shape屬性數(shù)據(jù)綁定到同一個名為“ highlight”的布爾數(shù)據(jù)屬性。每個轉(zhuǎn)換函數(shù)均采用布爾值，并為數(shù)據(jù)綁定的屬性返回適當(dāng)?shù)闹怠Ｍㄟ^將“ highlight”數(shù)據(jù)屬性設(shè)置為false或true，從數(shù)據(jù)控制每個節(jié)點的外觀變得很簡單。

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

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

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

想要購買GoJS正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼