Skip to content
BobDickinson edited this page Apr 3, 2014 · 15 revisions

What is data binding

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

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

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

[viewModel.]answer [viewmodel.]person.firstName [viewModel.]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))

Clone this wiki locally