data-win-bind property

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

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.

Remarks

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.

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.

Examples

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. When the property changes, the text and background color of the DIV changes too.

<div id="boundDiv" data-win-bind="innerText: age; style.background: color"></div>

The JavaScript that binds the person object to the DIV.

var colorArray = ["red", "green", "blue"];
var person = { age: 0, color: colorArray[0] };
var span = document.getElementById("boundDiv");
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];
};

Requirements

See also

Template

Quickstart: add a ListView