Привязка данных WinJS: классы и привязка событий

Есть два набора свойств, к которым вы можете привязаться.

Во-первых, это свойства, поддерживаемые в DOM каждым типом элемента. Так, например, для элемента img вы можете привязать свойство src, чтобы установить отображаемое изображение. Для элемента input вы можете привязать к свойству value. Полный список элементов HTML, доступных для приложений Metro, можно просмотреть здесь.

Второй набор свойств доступен, если вы применили элемент управления пользовательского интерфейса WinJS к элементу (что обычно делается с помощью атрибута data-win-control. Вы можете установить свойства, определенные каждым элементом управления, с помощью свойства winControl, которое добавляется при применении элемента управления. Например, если вы хотите привязать свойство itemTemplate к ListView, у вас будет такая разметка:

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

Вы можете использовать ту же технику для установки обработчиков событий. Определите функции обратного вызова как часть вашего источника данных следующим образом:

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

А затем привязать к свойству on*, которое соответствует интересующему вас событию:

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

Добавлять и удалять отдельные классы гораздо сложнее. Я считаю, что проще всего это сделать с помощью привязки на основе кода. Создайте наблюдаемое свойство в вашем источнике данных следующим образом:

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

А затем используйте метод привязки для наблюдаемого объекта, чтобы получать уведомления об изменении значения и применять/удалять класс следующим образом:

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

Вы можете связать классы декларативно, но вам нужно установить все классы за один раз, что редко бывает полезным. Если вы хотите использовать этот подход, вы привязываете свойство className к элементу.

Вы можете установить любое свойство javascript для элементов через привязку данных. Таким образом, можно установить все, что представлено как свойство javascript (в основном, все, кроме атрибутов aria-).

Добавление имени класса немного сложнее, так как вы можете установить свойство className, но не добавлять к нему с помощью привязки. Однако вы можете включить все имена классов в одну строку.

У нас есть код, который постоянно устанавливает, например, атрибуты onclick. Включите функцию как часть источника данных, и все готово.