Stringifying ViewItems

Gaffa has been designed from the outset to support the serialisation of complex application structures. This allows your application to only download a small amount of code on page-load, and then receive the structure for a particular part of your application later in its life-cycle. The benefit is much faster load-times.

Serialisation

Any ViewItem can be stringified by simply calling JSON.stringify(viewItem);

A view structure that look like this:

var heading = new Heading();
heading.text.value = 'Hello World';

var textbox = new Textbox();
textbox.value.binding = '[someProperty]';

var wrapper = new Container();
wrapper.views.content.add([
    heading,
    textbox
]);

would serialise to the following JSON:

{
    _type: 'container',
    views:{
        content:[
            {
                _type:'heading',
                text:{
                    value: 'Hello World'
                }
            },
            {
                _type:'textbox',
                value:{
                    binding: '[someProperty]'
                }
            }
        ]
    }
}

Key serialised properties

There are some properties that are important to note when ViewItems are serialised.

Required properties

_type

This property is the ViewItems prototype._type property. It is used by gaffa to identify which ViewItem constructor to use when inflating the serialised structure.

_type must be unique to Views, Actions, and Behaviours.

Optional properties

Any property that is not default to the ViewItem should be included in the serialised output.

Excluded properties

ViewItem has a custom .toJSON method which will remove some unwanted properties before the structure is serialised.

Properties that will not be included:

• gaffa
• parent
• parentContainer
• renderedElement
• _removeHandlers
• gediCallbacks
• super
• _events

Serialising from another source.

As long as you produce the same format of JSON as described above, you can create it from any source.

For example, you could output serialised gaffa ViewItems from a different language, and serve it to a gaffa application, and as long as all used ViewItems have been registered with Gaffa, they will render correctly.