Question

First off, is there any list of properties that can be set when using data-win-bind attribute in your markup?

A few things I am looking to do:

1. Conditionally append a classname based on the datasource.
2. Declare event listeners within the markup. Would like these event listeners to exist on the datasource and NOT some global function.

Answer 1

There are two sets of properties that you can bind to.

The first is the properties supported in the DOM by each element type. So, for an img element, for example, you can bind the src property to set the image that is displayed. For an input element you can bind to the value property. You can see a complete list of the HTML elements that are available for Metro apps here.

The second set of properties is available if you have applied a WinJS UI control to an element (which is usually done with the data-win-control attribute. You can set the properties defined by each control via the winControl property which is added when the control is applied. As an example, if you wanted to bind the itemTemplate property in a ListView, you would have markup like this:

<div id="list" data-win-control="WinJS.UI.ListView"
    data-win-bind="winControl.itemTemplate: myValue"></div>

You can use the same technique to set your event handlers. Define the callback functions as part of your data source like this:

var dataSource = {
    myClickHandler: function (e) { console.log("Click!") }
}

And then bind to the on* property that corresponds to the event you are interested in:

<button data-win-bind="onclick: myClickHandler">Press Me</button>

Adding and removing individual classes is much trickier. I find that the easiest way to do it is with a code-based binding. Create an observable property in your data source like this:

var dataSource = {
    myClickHandler: function (e) { console.log("Click") },
    classes: WinJS.Binding.as({
        myFirstClass: true,
        mySecondClass: false,
    })
}

And then use the bind method on the observable object to get notifications when the value changes and apply/remove the class, as follows:

dataSource.classes.bind("myFirstClass", function (newValue) {
    var elem = document.getElementById("myId");
    if (newValue) {
        WinJS.Utilities.addClass(elem, "myFirstClass");
    } else {
        WinJS.Utilities.removeClass(elem, "myFirstClass");
    }
});

You can bind classes declaratively, but you need to set all of the classes in one go, which is rarely that useful. If you want to go that approach, then you bind the className property on the element.