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

(3)Gojs model简介的更多相关文章

  1. (2) GoJS Node简介

    node GoJS提供了非常简单的创建Node节点的方法,可将文本内容.结点形状.背景颜色.边距等属性通过数据绑定[go.Binding]直接绑定到对应的Node数据中. 本文简单介绍Node的创建过 ...

  2. Sentry 监控 - Snuba 数据中台架构(Data Model 简介)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  3. User Browsing Model简介

    搜索引擎的点击日志提供了很多有价值的query-doc相关性信息,但是这些信息是有偏的,因为对于用户没有点击过的doc,我们无法确定其是否真实地被用户浏览过.即日志中记录的展现信息与实际的展现信息之间 ...

  4. Office Add-in Model 简介

    原文地址:http://simpeng.net/office-add-in/office-add-in-model-%e7%ae%80%e4%bb%8b/ , 为了本博客内容的完整性,转载至此. Of ...

  5. POM (Project Object Model)简介

    1  概念介绍 一个项目所有的配置都放置在 POM 文件中:定义项目的类型.名字,管理依赖关系,定制插件的行为等等.比如说,你可以配置 compiler 插件让它使用 java1.5 来编译. < ...

  6. 在c++中使用Outlook Object Model发送邮件

    一.Outlook Object Model简介 Outlook Object Model(OOM)是outlook为开发者提供的一个COM组件,我们可以在程序中使用它来发送邮件.管理邮箱等.相关介绍 ...

  7. ASP.NET MVC 3 Model【通过一简单实例一步一步的介绍】

    今天主要讲Model的两个方面: 1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍 2. ASP.Net MVC 3 Model 的一些验证 MVC 中 Model ...

  8. Attention Model(注意力模型)思想初探

    1. Attention model简介 0x1:AM是什么 深度学习里的Attention model其实模拟的是人脑的注意力模型,举个例子来说,当我们观赏一幅画时,虽然我们可以看到整幅画的全貌,但 ...

  9. asp.mvc展示model

    1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍2. ASP.Net MVC 3 Model 的一些验证 MVC 中 Model 主要负责维持数据状态,将数据从数据存 ...

随机推荐

  1. DIV居中显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. java笔记之线程简述1

    1:线程是依赖于进程而存在. 2:什么是进程?  通过任务管理器我们就看到了进程的存在.  而通过观察,我们发现只有运行的程序才会出现进程.  进程:就是正在运行的程序.  进程是系统进行资源分配和调 ...

  3. E20180128-hm

    paradigm  n. 范例,样式,模范; 词形变化表; outlet  n. 出口,出路; 批发商店; 排水口,通风口; 发泄(情感)的方法;

  4. bzoj 3676: [Apio2014]回文串【后缀自动机+manacher】

    用manacher找出本质不同的回文子串放在SAM上跑 #include<iostream> #include<cstdio> #include<cstring> ...

  5. 洛谷 P3254 圆桌问题【最大流】

    s向所有单位连流量为人数的边,所有饭桌向t连流量为饭桌容量的边,每个单位向每个饭桌连容量为1的边表示这个饭桌只能坐这个单位的一个人.跑dinic如果小于总人数则无解,否则对于每个单位for与它相连.满 ...

  6. LuoguP1063 能量项链【区间Dp】

    前天测试考了QAQ.这么经典的区间dp不再开一文好像有点可惜. 内容是从模拟赛结题报告中copy来的.QAQ noip能量项链原题. https://www.luogu.org/problemnew/ ...

  7. IIS发布问题服务器配置

    1. <validation validateIntegratedModeConfiguration="false" /> 2.Http 404.0-NotFound ...

  8. [POI2009]救火站Gas

    Description 给你一棵树,现在要建立一些消防站,有以下要求: 1. 消防站要建立在节点上,每个节点可能建立不只一个消防站. 2. 每个节点应该被一个消防站管理,这个消防站不一定建立在该节点上 ...

  9. _bzoj3224 Tyvj 1728 普通平衡树【Splay】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3224 保存splay模版 一刻不停写了一个小时多一点,幸好一遍过了!(其实带着freopen ...

  10. 51nod1099 任务执行顺序

    #include <bits/stdc++.h> using namespace std; int main() { int n; cin>>n; int r,o; int s ...