data-win-bind property

Article
01/26/2017

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.
You cannot bind to the ID attribute of an element.
You can't bind to custom attributes that begin with "data-".

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

Minimum supported client	Windows 8 [Windows Store apps only]
Minimum supported server	Windows Server 2012 [Windows Store apps only]
Minimum supported phone	Windows Phone 8.1
Library	Winjs.js

Share via