data-win-bind property

Binds a property of an element to a property of a data source.

Important  Data binding to lists (other than ListView or FlipView) and within iframe elements is not supported.

Syntax

    <element data-win-bind="elementProperty1 : dataSourceProperty1; elementProperty2: dataSourceProperty2" />

Property value

Type: String

A string with the following format:

elementPropertyName : dataSourcePropertyName

where elementPropertyName is the name of a property on the host element, and dataSourcePropertyName is the name of a property of the data source. When the Template is used, the data source's property value is used to set the element's property.

You must separate multiple sets of element/data source property pairs with a semicolon.

If you need to process the data source value, add a converter function and include it as in the following code, where the name of the function follows the object property that is to be set (separated by a space). Note that the converter function needs to be accessible from the global namespace, and can be included in a namespace created by using WinJS.Namespace.define. For more information, see WinJS.Binding.converter.

The following code shows how to use the data-win-bind attribute to bind a DIV element to a person custom object. The person.age property changes every 500 milliseconds.

<div id="boundDiv" data-win-bind="innerText: age"></div>
<script type="text/javascript">
    var person = { age: 0 };
    var span = document.getElementById("boundSpan");
    WinJS.Binding.processAll(span, person);
    var bindingPerson = WinJS.Binding.as(person);

    setInterval(function () {
        changeAge(bindingPerson);
    }, 500);

function changeAge(p) {
    p.age++;
};
</script>

The following code shows how to use the data-win-bind attribute to bind the background color of a DIV element to the person custom object. The background color changes every 500 milliseconds.

<div id="boundDiv" data-win-bind="innerText: age; style.background: color"></div>
<script type="text/javascript">
    var colorArray = ["red", "green", "blue"];
    var person = { age: 0, color: colorArray[0] };
    var span = document.getElementById("boundSpan");
    WinJS.Binding.processAll(span, person);
    var bindingPerson = WinJS.Binding.as(person);

    setInterval(function () {
        changeColor(bindingPerson);
     }, 500);

    var index = 0;

    function changeColor(p) {
        if (index > 2)
            index = 0;
        p.age = index++;
         p.color = colorArray[index];
    };
</script>

Remarks

For more information about using this attribute, see the topic Quickstart: binding data and styles to HTML elements and the Declarative Binding sample.

For an example showing how to use an item template with a ListView, see the Add a ListView quickstart.

Requirements

See also

Template

Quickstart: add a ListView

Build date: 12/5/2012