Как реализовать привязку составного объекта (HTML)

Статья
12/12/2015

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

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

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

Изучение темы краткого руководства Привязка данных и стилей к элементам HTML может помочь в выполнении шагов данного раздела.

Инструкции

Этап 1: Настройка проекта для использования привязки

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

Этап 2: Настройка составного объекта

Определите объект Person с полями имени и цвета, массивом имен, массивом названий цветов и частным методом, предоставляющим случайный индекс для массива. Для определения объекта можно использовать метод WinJS.Class.define. Добавьте этот код в немедленно вызываемую анонимную функцию в файле default.js.


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        }
    });

})();

Теперь добавьте к определению Person (второму аргументу, переданному в WinJS.Class.define) два открытых метода, которые запускают и останавливают процесс, изменяющий поля имени и цвета каждые 500 миллисекунд. Полный вызов WinJS.Class.define показан ниже:


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        },

        // Starts the process that changes the name.
        start: function () {
            var that = this;
            if (this.timeout === null) {
                this.timeout = setInterval(function () { that._newName(); }, 500);
            }
        }, 

        // Stops the process that changes the name.
        stop: function () {
            if (this.timeout !== null) {
            clearInterval(this.timeout);
                this.timeout = null;
            }
        }
    });

})();

Этап 3: Привязка объекта к HTML

В данный момент невозможно наблюдать за объектом Person, поскольку он не предоставляет уведомления об изменениях. Мы сделаем его более наблюдаемым, добавив к объекту Person необходимые функции привязки. Функция WinJS.Class.mix добавляет к объекту Person функциональность объекта WinJS.Binding.mixin, которая включает метод bind, а также возможности функции WinJS.Binding.expandProperties, которая создает свойства объекта для привязки. Вызовите метод WinJS.Class.mix после определения объекта Person. (Чтобы класс Person можно было комбинировать с чем-то, его надо сначала определить.)
```
WinJS.Class.mix(Person,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties({name: "", color: ""})
); 
```
Вам также нужно вызвать _initObservable внутри конструктора объекта Person для настройки свойства _backingData. Измените конструктор объекта Person следующим образом:
```
...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...
```
После создания экземпляра объекта Person его можно привязать к двум свойствам. Метод bind принимает два параметра: имя свойства или поля, которое следует привязать, и функцию, которая указывает способ привязки. Эта функция имеет два параметра: новое значение и старое значение. Так как bind является методом экземпляра, на данный момент мы просто создадим экземпляр Person и вызовем метод bind по его полям имени и цвета. Добавьте следующий код в обработчик событий app.onactivated в файле default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var myPerson = new Person();

    myPerson.bind("name", onNameChange);

    myPerson.bind("color", onColorChange);

    function onNameChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.innerText = newValue;
    }

    function onColorChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.style.color = newValue;
    }
}
```
Предупреждение Не пытайтесь привязать данные к ИД элемента HTML.

Для включения событий изменения следует изменить функцию Person._newName.

_newName: function () {
    this["name"] = this._nameArray[this._randomizeValue()];
    this['color"] = this._colorArray[this._randomizeValue()];
    }

Вы можете проверить привязку, вызывая метод Person.start.
```
myPerson.start();
```
После сборки и запуска приложения вы увидите:

Добро пожаловать, Гарри

Имя и цвет имени должны постоянно меняться.

Связанные разделы

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