2-Way Data Binding

The view adapter engine supports binding models to view adapters by way of an intermediary known as anobserver. Models are wrapped by anobserverand then theobserverinstance is "bound" to the view adapters in a hierarchal fashion. When changes are sent through theobserverto the model, theobservernotifies bound listeners of the changes. During the binding, theobservermonitors which properties the listener is getting values from and binds the listeners to each observed property. This check is re-performed each time a listener is updated due to a change in a property value.

If the view adapter is a container, when anobserveris bound, the view adapter binds to the observed model and forwards the binding to all of it's child controls. If the view adapter is a repeater, when anobserveris bound, the view adapter binds to and iterates through the observed array and creates a cloned instance of it's item control template for each item in the array and binds the clone to the item. If the view adapter is an input type control, when anobserveris bound, the view adapter 2 way binds itself to the observed model.

You can access a value from the observed model using standard object notation. If the value located at a particular path is either an object or an array, then the value returned will be wrapped in anobserver. To access the natural value contained within theobserver, simply call the returnobserverwith no path specified. The following calls on an observed model are all valid examples:

function(observer)
{
    var model   =
    new observer
    ({
        someInt:    1,
        someObject:
        {
            someArray:
            [
                {
                    someOtherInt: 2
                }
            ]
        }
    });

    // returns an integer value 1
    var value   = model("someInt");

    // returns an integer value 2
    value       = model("someObject.someArray[0].someOtherInt");

    // returns an observed object { someOtherInt: 2 }
    value       = model("someObject.someArray[0]");

    // returns an object { someOtherInt: 2}
    value       = model("someObject.someArray[0]")();

    // returns an observed array [{ someOtherInt: 2 }]
    value       = model("someObject.someArray");

    // returns an array [{ someOtherInt: 2 }]
    value       = model("someObject.someArray")();

    // returns an observed object { someArray: [{ someOtherInt: 2 }] }
    value       = model("someObject");

    // returns an object { someArray: [{ someOtherInt: 2 }] }
    value       = model("someObject")();

    // returns an object { someInt: 1, someObject: { someArray: [{ someOtherInt: 2 }] } }
    value       = model();
}