(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的经常使用方法后续补齐