Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

data-win-bind property

Applies to Windows and Windows Phone

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

See also

Template
Quickstart: add a ListView

 

 

Show:
© 2015 Microsoft