Data Binding

What is data binding

Data binding is the mechanism that allows user interface elements in a "View" to be linked directly to data and/or commands in a "View Model".

Consider the following View and View Model:

View

{ control: "stackpanel", orientation: "Horizontal", contents: [
    { control: "text", value: "First name:" },
    { control: "edit", binding: "firstName" }, // << Edit control bound to firstName
] },
{ control: "stackpanel", orientation: "Horizontal", contents: [
    { control: "text", value: "Last name:" },
    { control: "edit", binding: "lastName" }, // << Edit control bound to lastName
] },
{ control: "text", value: "Welcome {firstName} {lastName}" }, // << Text composed from bound values

View Model

viewModel =
{
    firstName: "John",
    lastName: "Smith",
}

In this example, edit controls for first and last name will be pre-populated with the values "John" and "Smith" respectively, and the welcome string will be set to "Welcome John Smith". As the end user changes the value in either edit control, the associated value in the view model will be updated in real time, and that will trigger the simultaneous update of the welcome string.

In Maaas, data binding is the only method that applications have to populate and interact with user interface elements, and for that reason the Maaas data binding system is necessarily comprehensive (supporting literally every possible interaction).

Types of data binding

###Property Binding

• Can be used in any attribute of any element
• Multiple bindings can be aggregated in an attribute
• One way (or one time)
• Can use format specifiers

###Value Binding

• Can be used on certain elements
• Specified in the "binding" attribute
• Value binding (if any) is two-way, linked to a single data element in the view model
• Zero or more bound commands

Binding Paths

Accessing view model data in a binding specification uses a path syntax. Consider the view model below:

viewModel = 
{
    person: 
    {
        firstName: "John",
        lastName: "Smith"
    },
    colors: 
    [
        { name: "Red", value: "FF0000" },
        { name: "Green", value: "00FF00" },
        { name: "Blue", value: "0000FF" }
    ],
    answer: 42
}

To access a simple value, you just use the property name, for example: {answer}. To navigate into an object, you use dot notation, for example: {person.firstName}. To select an array element you use square bracket notation with a numeric index (0-based), for example: {colors[1]}. You can of course use these notations in combination, for example: {colors[1].name}.

The Binding Context

Each user interface element has a "binding context", which specifies the item in the view model on which its bindings will be based. At the top level, the binding context is the view model itself (as in the binding paths examples above).

Binding context specifiers

Binding path tokens - 
    $root - Selects the root of the view model.
    $parent - Selects the parent of the current binding context.
    $data - Selects the value of the current binding context.
    $index - Produces a numeric value representing the position (zero-based index) of an iterated binding context

Each item has a binding context, which is determined before the item is created/processed by inspecting the
"binding" attribute to look for a "foreach" or "with" binding context specifier.

    foreach: "foos" (for each element in array "foos", create an instance of this visual element and set the
                     binding context for the visual element to the array element).

    with: "foo.bar" (select the element foo.bar from the current binding context as the new binding context
                     for the visual element).

    Note that it is possible to use "foreach" and "with" together - in which case "foreach" is applied first
    and "with" is applied to each element in the foreach array.  This allows for path navigation both up to,
    and then after, the context to be iterated.

Property binding expressions/directives:

One-time using ^ (default is one-way binding)

Format specifier (numeric values) - {counter:F2} resolves to N.NN

    http://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.110).aspx

Expression support (TODO !!!):

	Simple negation using !, such as visibility="{!isVisible}"
	Mathematical (240 - charCount)
	Logical (charCount >= 240)
	Type conversion (str(240 - charCount))