Краткое руководство: привязка данных и стилей (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Вы можете привязать данные и стили к элементам HTML с помощью привязки библиотеки Windows для JavaScript. По умолчанию привязка с помощью WinJS односторонняя. Это значит, что элемент HTML обновляется при изменении данных и стиля, но данные не обновляются при изменении элемента HTML. В этом кратком руководстве показан самый простой тип привязки — декларативная привязка к простому объекту, который содержит только данные. Подробнее о более сложных видах привязки: Привязка составного объекта и Использование шаблонов для привязки данных.

Необходимые условия

Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Инструкции по созданию первого приложения см. в разделе Создание первого приложения на JavaScript.

Настройка проекта привязки

Чтобы настроить проект, в котором будет использоваться привязка, выполните следующие шаги.

Создайте пустое приложение среды выполнения Windows на JavaScript и назовите его BindingApp.
В файле default.html добавьте элемент DIV для привязки и присвойте ему идентификатор basicBinding и внутренний текст Добро пожаловать, как показано в этом разделе.
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

Привязка данных

Вы можете привязать любые данные к элементу HTML, но для примера мы просто настроим объект person с полем имени.

Предупреждение Не пытайтесь привязать данные к ИД элемента HTML.

В файле default.js добавьте следующую строку кода в немедленно вызываемую анонимную функцию, сразу после директивы use strict.
```
(function () {
    "use strict";

    // Create a 'person' object.
    var person = { name: "Fran" };

    // Other app set-up code.
})();
```
В элементе DIV добавьте элемент SPAN, который получает доступ к полю person.name.
```
<div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>
```
Следует вызвать метод WinJS.Binding.processAll, чтобы появилось имя. Метод WinJS.Binding.processAll начинает искать атрибут data-win-bind в указанном элементе, а затем выполняет поиск всех потомков этого элемента. Второй параметр метода WinJS.Binding.processAll предоставляет контекст данных для вставки в указанный элемент. Добавьте следующий код в обработчик событий app.onactivated в файле default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
После сборки и отладки приложения вы увидите:

Добро пожаловать, Фрэн
Рассмотрим следующий фрагмент кода:
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- Система привязки WinJS использует наблюдаемый уровень для распространения уведомлений об изменениях.
- При передаче объекта данных в processAll в качестве контекста данных он заключается в вызов WinJS.Binding.as, который создает наблюдаемый прокси-сервер для этого объекта или устраивает встречу с уже созданным.
- Все события записи (т. е. наборы свойств), для которых требуется создавать уведомления, должны происходить на этом уровне прокси-сервера. Позднее можно организовать встречу с наблюдаемым прокси-сервером через WinJS.Binding.as.
- Как правило, проще всего это сделать, используя данный наблюдаемый прокси-сервер в качестве объекта для чтения и записи данных.
- Однократная привязка происходит при использовании инициализатора привязки для переопределения поведения по умолчанию (например, WinJS.Binding.oneTime) или при попытке привязки к объектам, которые не являются расширяемыми (например, зафиксированные объекты и проецируемые объекты WinRT).
Чтобы показать, что происходит при изменении основных данных, мы просто используем кнопку для имитации получения данных из другого процесса или из внутреннего хранилища данных. Добавьте элемент BUTTON после элемента DIV в файле default.html.
```
<button id="btnGetName">Get name</button>
```

Добавьте метод, который имитирует получение данных. В этом случае мы получим имя из массива с помощью случайного индекса. В файле default.js добавьте следующий код в обработчик событий app.onactivated, обрабатывающий событие нажатия кнопки.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

Чтобы проверить этот код, выполните сборку и отладку приложения. Вы будете видеть другое имя при каждом щелчке кнопки Get name.

Привязка стиля

Теперь привяжем цвет фона элемента SPAN.

В файле default.html добавьте значение style.background к атрибуту data-win-bind и установите его привязку к полю цвета объекта person.
```
<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>
```
В файле default.js добавьте поле цвета к объекту person.

Совет Левая часть выражения привязки является любым свойством элемента, а его подсвойства используют синтаксис JavaScript (вы будете его использовать для программного назначения).
```
var person = { name: "Fran", color: "red" };
```

Также в файле default.js в обработчике событий app.onactivated добавьте второй массив цветов и измените функцию getName так, чтобы обновился цвет имени.

var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

Не забудьте изменить вызов getName в обработчике события нажатия кнопки.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

После сборки и отладки приложения вы должны видеть, что при щелчке кнопки Get name обновляется как имя, так и цвет имени.

Краткая сводка и дальнейшие действия

В этом кратком руководстве мы показали, как можно привязать простой объект JavaScript к элементу HTML span.

Сведения о привязке нескольких составных объектов см. в разделе Привязка составного объекта. Если вы хотите использовать шаблон для привязки нескольких объектов, см. раздел Использование шаблонов для привязки данных.

Поделиться через