data-win-control property

Makes a div element host the specified Windows Library for JavaScript control.

Important  The data-win-control property is not supported within iframe elements.

 

Syntax

<div data-win-control="controlName" />

Property value

Type: String

The fully qualified name of the WinJS control to host. For example, "WinJS.UI.ToggleSwitch".

Remarks

The WinJS toolkit provides several useful controls that aren't a part of HTML5, such as the FlipView, ListView, and ItemContainer controls. Unlike HTML controls, WinJS controls don't have dedicated markup elements: you can't create a ItemContainer control by adding a <itemcontainer /> element.

To use a WinJS control, you create a div element and use the data-win-control attribute to specify the type of control you want. To add a ItemContainer control, you'd set the attribute to "WinJS.UI.ItemContainer".

The following example uses the data-win-control attribute to create a ItemContainer control.

<div id="ratingControlHost" data-win-control="WinJS.UI.ItemContainer"></div>

Before the control will work, you must activate your controls by calling the WinJS.UI.processAll function (for all controls) or the WinJS.UI.process function (for a single control) from your code behind. The WinJS.UI.processAll function processes the document and activates any WinJS controls that you've declared in markup.

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

Quickstart: adding WinJS controls