JavaScript control attributes for Windows Store Apps (data-win-* attributes)

Lately, I have done something mostly related to Windows Store App and I'm also interested in JavaScript. This language is very powerful in so many ways. It's easy to entry, you just have a browser and a text editor then your can start develop something. However, JavaScript is easy to start, but it is not easy to be mastered. I'm not a JavaScript professional, not even a web developer. But when compared the learning curve between JavaScript and Strong-Typed Languages (such as Java, C#). By the way, this post is not about language technologies.

JavaScript is powerful enough to make it be a one of native languages of Windows Store App. In this post would like to give introduction about added-on attributes to make html elements transformed into Windows Store controls.

The first one is "data-win-control". It is a very important attribute to create WinJS controls by giving them a control name then call process UI to apply controls on the startup. This attribute can't not be used on iframe element.

HTML

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

JavaScript

(function( ) {

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

})();

The next one is "data-win-options". It can receive a JavaScript object to set that control properties.

HTML

<div 
    data-win-control="control" 
    data-win-options="{ property1 : value1, property2 : value2}">
</div>

It can also do binding data as XAML does using "data-win-bind" (with some code in JavaScript side).

HTML

    <element data-win-bind="elementProperty1 : dataSourceProperty1; elementProperty2: dataSourceProperty2" />

To make elements can't be selected, use "data-win-selectable" property. It is just a true / false value. By default, all input elements and elements with the contentEditable attribute set to true are selectable.

HTML

<div data-win-selectable="true" ...

The controls can be binded with external resources for localization or other purposes using "data-win-res".

HTML

<p data-win-res="{textContent: 'String1'}"></p>

For the "data-win-fragmentLoad" property, the document said that this will be removed from the next version of Windows Library for JavaScript. So, I think we should not use it.

Reference: Windows Library for JavaScript control attributes