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 Windows Library for JavaScript control to host. For example, "WinJS.UI.Rating".

Remarks

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

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

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

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

Before the control will work, you must activate your controls by calling the WinJS.UI.processAll function from your code behind. The WinJS.UI.processAll function processes the document and activates any Windows Library for JavaScript controls that you've declared in markup.

A good way to activate your controls is to call WinJS.UI.processAll in an event handler for the page's DOMContentLoaded event, which fires after the page has been parsed but before all the resources are loaded. You can see this in the following example.

(function( ) {

    document.addEventListener("DOMContentLoaded", function(e) {
        WinJS.UI.processAll();
    });

})();

Requirements

See also

Quickstart: adding WinJS controls

Build date: 12/5/2012