Attributes of custom nodes not shown in JSON

I have already created a diagram and a custom node following this example.

The problem is, when I try to get the JSON from the diagram, the attributes I've added to the custom node are not shown, although they appear on the lateral panel.

Here's an example:

<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>

And this is the JSON I get when I do Y.diagramBuilder.toJSON():

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

Solution

The new attribute needs to be added to the SERIALIZABLE_ATTRS array. Something like that:

 this.SERIALIZABLE_ATTRS.push('customAttr');

I created a JSFiddle example: http://jsfiddle.net/aetevpfn/