Question

我已经在此example之后创建了一个图表和一个自定义节点。

问题是，当我尝试从图中获取JSON时，我添加到自定义节点的属性没有显示，尽管它们出现在侧面板上。

以下是一个例子：

<html>
    <head>
        <script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
        <link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
        <style>     
        .diagram-node-custom .diagram-node-content {
            background: url(http://www.saltlakemailing.com/wp-content/uploads/2012/03/process_icon.png) no-repeat scroll center transparent;
        }
        </style>

        <script>
            var Y = YUI().use('aui-diagram-builder',
            function(Y) { 
                Y.DiagramNodeCustom = Y.Component.create({
                    NAME: 'diagram-node',

                    ATTRS: {
                        type: {
                            value: 'custom'
                        },
                        customAttr: {
                            validator: Y.Lang.isString,
                            value: 'A Custom default'
                        }
                    },
                    EXTENDS: Y.DiagramNodeTask,

                    prototype: {
                        getPropertyModel: function () {
                            var instance = this;

                            var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);

                            model.push({
                                attributeName: 'customAttr',
                                name: 'Custom Attribute'
                            });
                            return model;
                        }
                    }
                });

                Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;

                Y.diagramBuilder = new Y.DiagramBuilder(
                  {
                    boundingBox: '#myDiagramContainer',
                    fields: [
                      {
                        name: 'name1',
                        type: 'custom',
                        customAttr: 'VALUECUSTOM',
                        xy: [100, 100]
                      }
                    ],
                    srcNode: '#myDiagramBuilder'
                  }
                ).render();    
              }
            );
        </script>
    </head>

    <body>
        <div id="myDiagramContainer">
            <div id="myDiagramBuilder"></div>
        </div>
        <button onClick="console.log('JSON: '+JSON.stringify(Y.diagramBuilder.toJSON()));">GET JSON</button>
    </body>
</html>

这是我在做的时候得到的JSON Y.diagramBuilder.toJSON（）：

{"nodes":[{
        "transitions":[],
        "description":"",
        "name":"name1",
        "required":false,
        "type":"custom",
        "width":70,
        "height":70,
        "zIndex":100,
        "xy":[100,100]
}]}

Answer 1

需要将新属性添加到SERIALIZABLE_ATTRS数组中。这样的事情：

 this.SERIALIZABLE_ATTRS.push('customAttr');

我创建了一个JSFiddle示例：http://jsfiddle.net/aetevpfn/

自定义节点的属性未在JSON中显示

1 个答案: