Javascript JSON中未显示自定义节点的属性_Javascript_Alloy Ui

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

javascript

Javascript JSON中未显示自定义节点的属性,javascript,alloy-ui,Javascript,Alloy Ui,我已经创建了一个图表和一个自定义节点问题是，当我试图从图中获取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

我已经创建了一个图表和一个自定义节点

问题是，当我试图从图中获取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>

需要将新属性添加到可序列化的_ATTRS数组中。诸如此类：

 this.SERIALIZABLE_ATTRS.push('customAttr');

我创建了一个JSFIDLE示例：

 this.SERIALIZABLE_ATTRS.push('customAttr');