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

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

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

點(diǎn)擊下載GoJS最新試用版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

綁定對(duì)象屬性，例如Part.location

您還可以對(duì)具有對(duì)象值的屬性進(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);

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

轉(zhuǎn)換功能

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

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

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

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

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

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

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

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。

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