jquery - mxGraph 自定义用户对象，具有 xml 子元素读取和写入

Question

在mxGraph教程页面中，可以使用graph.insertVertex()方法对自定义用户对象进行参数化。

mxCell with custom user object value

自定义用户对象采用工作流编辑器示例中包含的 wfeditor-commons.xml 中的模板定义的 xml 格式。

但是通过 HTMLCollection 构建子元素的更好方法是什么？下面的xml是我自己定义的模板，如果某些值已更改，我需要维护Description和ActivityType子元素。

<add as="task">
  <Activity label="Task" name="" code="">
    <Description/>
    <ActivityType type="TaskNode"/>
        <mxCell vertex="1"> 
            <mxGeometry as="geometry" width="72" height="32"/>
        </mxCell>
    </Activity>
</add>

通过以下代码访问子 xml 元素 Description 和 ActivityType 节点:

var model = this.graph.getModel();
var snode = model.getSelectedCell();  //to get current selected cell
var id = snode.id;
var label = $(snode).attr("label");   //get xml node attribute

var descriptionNode = $(snode.value).children("Description");
var descriptionTextContent = $(descriptionNode).text();    //get xml node text
var activityTypeNode = $(snode.value).children("ActivityType");
var activityTypeAttr = $(activityTypeNode).attr("type");   //get xml node attribute

我不确定这是否是通过HTMLCollection实现自定义用户对象读写的有效方法。

顺便说一句，如果自定义用户对象的子元素已更改，则需要保存。如何设置节点属性和文本内容值？更改这些值后，还需要调用设置值方法来刷新用户对象。谢谢

model.setValue(cell, newValue)

Answer 1

一开始，有一个关于 jQuery xml 选择器和 MS XML DOM 对象方法的混淆。经过对 MS XML DOM 知识的一些研究工作，这是一个很好的读写用户对象的解决方案。

//读取方法

    var model = kmain.mxGraphEditor.graph.getModel();
    var snode = model.getValue(cell);

    var activity = {};
    activity.id = snode.getAttribute("id");
    activity.name = snode.getAttribute('label');
    activity.code = snode.getAttribute('code');

    var descriptionNode = snode.getElementsByTagName("Description")[0];    //child node
    if (descriptionNode) activity.description = descriptionNode.textContent;

    //activity type
    var activityTypeNode = snode.getElementsByTagName("ActivityType")[0];   //child node
    activity.type = activityTypeNode.getAttribute("type");

//写入方法

    var snode =  model.getValue(kmain.mxSelectedDomElement.Cell);

    snode.setAttribute('label', activity.name);   //set attribute value
    snode.setAttribute('code', activity.code);    //set attribute value

    var descriptionNode = snode.getElementsByTagName("Description")[0]; 
    if (!descriptionNode){
        descriptionNode = snode.appendChild(snode.ownerDocument.createElement('Description'));    //add child element
    }
    descriptionNode.textContent = activity.description;         //set element text

    var activityTypeNode = snode.getElementsByTagName("ActivityType")[0];
    activityTypeNode.setAttribute("complexType", activity.complexType);

这将使 mxGraph 用户维护自定义用户对象变得容易。