(3)Gojs model簡介

在GoJS中，model用來存儲表的基本數據，包括node、link等具體對象和屬性，與其在視覺上的展示效果不相關。model中往往只保存相對簡單的數據，最方便且持久化方法就是存成json或者xml這種格式的文本。
example:定義只有兩個包含兩個node的圖(nodeDataArray的具體含義見下文)

model.nodeDataArray = [
   { key: "Alpha",text:"α" },
   { key: "Beta" ，text:"β"}
 ];

①修改model中的數據

此model無法檢測到nodeDataArray數組的修改或任何節點數據對象的修改。如果要從nodeDataArray添加或刪除節點數據，需要調用addNodeData或removeNodeData等方法。如果想要修改某個node對象，取決於你想修改的屬性是model需要知道的結構屬性還是只適用於數據綁定或其他目的的屬性。對於結構屬性，需要調用以"set", "add", "insert", or "remove"等具體的方法，如 setKeyForNodeData, setCategoryForNodeData, GraphLinksModel.setToKeyForLinkData, or GraphLinksModel.setGroupKeyForNodeData等;對於第二種屬性，如用於綁定並支持撤銷/重做的屬性，需要調用setDataProperty方法。
每個model都有自己的UndoManager，默認為禁用。 啟用時需要將UndoManager.isEnabled設置為true，以使UndoManager記錄model的更改，並為用戶執行撤消和重做。

②model的監聽事件

每個model都可以通過Model.addChangedListener注冊一個監聽器，以下方法可以監聽model結構屬性的改變：

• "nodeDataArray", Model.nodeDataArray數組被替換式觸發
• "nodeCategory", 調用Model.setCategoryForNodeData時觸發
• "nodeGroupKey", 調用GraphLinksModel.setGroupKeyForNodeData時觸發
• "linkDataArray", GraphLinksModel.linkDataArray數組被替換式觸發
• "linkFromKey", 調用GraphLinksModel.setFromKeyForLinkData時處罰
• "linkToKey", 調用GraphLinksModel.setToKeyForLinkData時觸發
• "linkFromPortId", 調用GraphLinksModel.setFromPortIdForLinkData時觸發
• "linkToPortId", 調用GraphLinksModel.setToPortIdForLinkData時觸發
• "linkLabelKeys", 調用GraphLinksModel.setLabelKeysForLinkData時觸發
• "linkCategory", 調用GraphLinksModel.setCategoryForLinkData時觸發
• "nodeParentKey", 調用TreeModel.setParentKeyForNodeData時觸發
• "parentLinkCategory", 調用TreeModel.setParentLinkCategoryForNodeData時觸發

③model的部分常用屬性

• nodeDataArray 獲取或設置與圖中的node，group或非鏈接部件對應的節點數據對象數組,初始值為空數組。
• nodeKeyProperty 獲取或設置返回每個node數據對象的唯一ID號或字符串的data屬性的名稱。
• nodeCategoryProperty 獲取或設置返回指定數據類別的字符串的node數據屬性的名稱。
• name 獲取或設置model的名稱。
• modelData 獲取一個JavaScript對象，該對象可以保存整個model的中我們自定義的屬性值，而不僅僅是一個node或一個link。
• isReadOnly 獲取或設置是否可以修改此model，例如添加node。
• undoManager 獲取或設置此model的underunderManger。
  更多的屬性可以查看官方文檔 Model Class,一個簡單的demo:

<div id="myDiagramDiv" style="width:100%; height:900px; background-color: #DAE4E4;"></div>
    <script>
        var $ = go.GraphObject.make;
        var  diagram  =  $(go.Diagram,  "myDiagramDiv",   {            
            initialContentAlignment:  go.Spot.Center      
        });

        var nodeDataArray = [{
            key: "Alpha"
        }, {
            key: "Beta"
        }];
        var linkDataArray = [{
            from: "Alpha",
            to: "Beta"
        }];
        diagram.model.nodeDataArray = nodeDataArray; //model.nodeDataArray存儲node的數據
        diagram.model.linkDataArray = linkDataArray; //model.linkDataArray存儲Link的數據
    </script>

④model的常用方法后續補齊