(3)Gojs model簡介

(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的經常使用方法後續補齊