流程圖控件GoJS教程：數據綁定（下）
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS現已更新至最新版本2.0.16發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~
更改數據值
以上所有示例均取決于 創建部件并將部件Panel.data屬性設置為引用相應的節點或鏈接數據時要評估的數據綁定。這些動作發生時自動圖表用于在設定模型的數據創建圖份Diagram.model。
但是，GoJS不知道何時修改了任意JavaScript對象的data屬性。如果要更改模型中的某些數據對象并自動更新圖表，則應執行的操作取決于所更改屬性的性質。
對于大多數數據屬性，模型不會對其進行特殊處理，但它們是數據綁定的，您只需調用Model.setDataProperty即可。在此示例中，我們修改節點數據對象上的“ highlight”值。此修改大約每秒發生兩次。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(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"))
);
diagram.model.nodeDataArray = [
{ key: "Alpha", highlight: false } // just one node, and no links
];
function flash() {
// all model changes should happen in a transaction
diagram.model.commit(function(m) {
var data = m.nodeDataArray[0]; // get the first node data
m.set(data, "highlight", !data.highlight);
}, "flash");
}
function loop() {
setTimeout(function() { flash(); loop(); }, 500);
}
loop();
改變圖結構
對于模型知道的數據屬性，例如鏈接數據的“到”或“從”，必須調用適當的模型方法才能修改數據屬性。直接修改數據屬性而不調用適當的模型方法可能會導致不一致或不確定的行為。
對于節點數據，模型方法是 Model.setCategoryForNodeData， Model.setKeyForNodeData， GraphLinksModel.setGroupKeyForNodeData， TreeModel.setParentKeyForNodeData和 TreeModel.setParentLinkCategoryForNodeData。對于鏈接數據，模型方法為GraphLinksModel.setCategoryForLinkData， GraphLinksModel.setFromKeyForLinkData， GraphLinksModel.setFromPortIdForLinkData， GraphLinksModel.setToKeyForLinkData， GraphLinksModel.setToPortIdForLinkData和GraphLinksModel.setLabelKeysForLinkData。
本示例更改鏈接數據的“ to”屬性，從而使鏈接連接到其他節點。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{ fill: "yellow", stroke: "orange", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
function switchTo() {
// all model changes should happen in a transaction
diagram.model.commit(function(m) {
var data = m.linkDataArray[0]; // get the first link data
if (m.getToKeyForLinkData(data) === "Beta")
m.setToKeyForLinkData(data, "Gamma");
else
m.setToKeyForLinkData(data, "Beta");
}, "reconnect link");
}
function loop() {
setTimeout(function() { switchTo(); loop(); }, 1000);
}
loop();
綁定到GraphObject源
綁定源對象不必是圖模型中保存的普通JavaScript數據對象。相反，源對象可以是同一Part中的一個命名GraphObject。source屬性必須是該類的可設置屬性。當屬性設置為新值時，將評估綁定。
這種綁定的一種常見用法是當Part.isSelected時更改Part的外觀。調用Binding.ofObject以使Binding使用其GraphObject.name是給定名稱的對象。使用空字符串“”或不使用參數來引用整個Part本身。這是一種方便，因此您無需命名整個零件。“ ofObject”實際上表示“名為...的GraphObject的”，如存在字符串參數時由Panel.findObject找到的。
在下面的示例中，Shape.fill綁定到Part.isSelected屬性。當選擇或取消選擇節點時，Part.isSelected屬性將更改值，因此將對綁定進行評估。轉換函數獲取布爾值，并返回所需的筆刷顏色以用作形狀的填充。此示例還關閉了選擇裝飾，因此，唯一的可視方法（即形狀的填充顏色）是表明已選擇節點的方法。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdorned: false }, // no blue selection handle!
$(go.Shape, "RoundedRectangle",
// bind Shape.fill to Node.isSelected converted to a color
new go.Binding("fill", "isSelected", function(sel) {
return sel ? "dodgerblue" : "lightgray";
}).ofObject()), // no name means bind to the whole Part
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "descr"))
);
diagram.model.nodeDataArray = [
{ descr: "Select me!" },
{ descr: "I turn blue when selected." }
];
注意：請勿聲明綁定依賴項的循環-這將導致未定義的行為。 GraphObject綁定源還要求將Part綁定到數據（即Part.data必須為非null）。GraphObject上的屬性必須是可設置的，因此它不適用于只讀屬性，例如那些返回計算值（例如Part.isTopLevel）或迭代器（例如Node.linksConnected）的屬性。
綁定到共享的Model.modelData源
除了Panel.data或面板中的某些GraphObject之外，綁定源對象可能是第三種來源。也可以是JavaScript對象，它是共享的Model.modelData對象。這允許將節點或鏈接元素屬性綁定到模型中將存在的共享屬性，即使模型中不存在節點或鏈接也可以對其進行修改。
在下面的示例中，Shape.fill綁定到Model.modelData對象上的“ color”屬性。單擊按鈕時，該changeColor函數modelData通過調用Model.setDataProperty修改對象。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" }, // the default value if there is no modelData.color property
new go.Binding("fill", "color").ofModel()), // meaning a property of Model.modelData
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text"))
);
// start all nodes yellow
diagram.model.modelData.color = "yellow";
diagram.model.nodeDataArray = [
{ text: "Alpha" },
{ text: "Beta" }
];
diagram.undoManager.isEnabled = true;
changeColor = function() { // define a function named "changeColor" callable by button.onclick
diagram.model.commit(function(m) {
// alternate between lightblue and lightgreen colors
var oldcolor = m.modelData.color;
var newcolor = (oldcolor === "lightblue" ? "lightgreen" : "lightblue");
m.set(m.modelData, "color", newcolor);
}, "changed shared color");
}
雙向數據綁定
上面的所有綁定僅將值從源數據傳輸到目標屬性。但是有時您希望能夠將GraphObject的值傳輸回模型數據，以使模型數據與圖保持最新。這可以通過使用TwoWay Binding來實現，該方法不僅可以將值從源傳遞到目標，還可以將目標對象中的值傳遞回源數據。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc").makeTwoWay(), // TwoWay Binding
$(go.Shape, "RoundedRectangle",
{ fill: "lightblue", stroke: "blue", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", loc: new go.Point(0, 0) }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
shiftNode = (function() { // define a function named "shiftNode" callable by button.onclick
// all model changes should happen in a transaction
diagram.commit(function(d) {
var data = d.model.nodeDataArray[0]; // get the first node data
var node = d.findNodeForData(data); // find the corresponding Node
var p = node.location.copy(); // make a copy of the location, a Point
p.x += 10;
if (p.x > 200) p.x = 0;
// changing the Node.location also changes the data.loc property due to TwoWay binding
node.location = p;
// show the updated location held by the "loc" property of the node data
document.getElementById("bindTwoWayData").textContent = data.loc.toString();
}, "shift node");
});
shiftNode(); // initialize everything單擊按鈕以移動節點。效果基本上就是用戶拖動節點時發生的情況。在此示例中，在Node.location上的雙向綁定將更新作為Node的Part.data的節點數據的“ loc”屬性。
正如從源到目標時可以使用轉換函數一樣，可以為Binding.makeTwoWay提供從目標到源去轉換函數。例如，在模型數據中以字符串而不是Point表示位置：
// storage representation of Points/Sizes/Rects/Margins/Spots is as strings, not objects:new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)但是，您不能在作為“鍵”屬性的節點數據屬性上具有TwoWay綁定。（默認為名稱“鍵”，但實際上是Model.nodeKeyProperty的值。）該屬性值在模型內的所有節點數據中必須始終是唯一的，并且模型可以識別。雙向綁定可能會更改該值，從而導致許多問題。同樣，Node.key屬性是只讀的，以防止意外更改鍵值。
雙向綁定的原因
在可設置的屬性上 使用雙向綁定的基本原因是要確保對該屬性的任何更改都將被復制到相應的模型數據中。通過確保模型是最新的，您只需保存模型即可輕松地“保存圖”，而“加載圖”只需將模型加載到內存中并設置Diagram.model即可。如果您僅在模型數據中保留JSON可序列化的數據，則可以使用Model.toJson和Model.fromJson方法在模型和文本表示之間進行轉換。
大多數綁定不需要是TwoWay。 出于性能原因，除非您確實需要將更改傳播回數據，否則不應將Binding設為TwoWay。大多數可設置的屬性僅在初始化時設置，然后永不更改。
可設置屬性僅在某些代碼對其進行設置時才更改值。該代碼可能在您作為應用程序一部分編寫的代碼中。或者它可能在命令或工具中。這是一個可能存在雙向綁定的屬性列表，因為預定義的命令或工具之一對其進行了修改：
Part.location，通過DraggingTool如果已啟用
Link.points，通過LinkReshapingTool（如果已啟用）
GraphObject.desiredSize，由ResizingTool啟用（如果已啟用）
GraphObject.angle，由RotatingTool啟用（如果已啟用）
TextBlock.text，如果已啟用，則由TextEditingTool進行
Part.isSelected，通過許多工具和命令
Node.isTreeExpanded和Node.wasTreeExpanded，通過CommandHandler.collapseTree和CommandHandler.expandTree，由“TreeExpanderButton”之稱
Group.isSubGraphExpanded和Group.wasSubGraphExpanded，通過CommandHandler.collapseSubGraph和CommandHandler.expandSubGraph，由“SubGraphExpanderButton”之稱
如果修改屬性的工具無法運行，或者修改屬性的命令無法調用，則無需在屬性上使用TwoWay綁定。除非編寫代碼來修改它們，否則您可能不需要任何其他屬性的TwoWay綁定。即使這樣，有時還是最好通過直接調用Model.setDataProperty來編寫代碼來修改模型數據，這取決于OneWay綁定來更新GraphObject屬性。
如果源是GraphObject而不是模型數據，也可以使用TwoWay綁定。當您不希望將狀態存儲在模型中，但又想在同一零件中同步GraphObjects的屬性時，則不需要這樣做。 謹慎使用TwoWay綁定。
=====================================================
想要購買GoJS正版授權的朋友可以。
更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線