Como associar um objeto complexo (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Em muitos casos você quer que seu aplicativo se associe a objetos complexos, em especial, objetos que gerenciam processos que não são controlados pela interface do usuário do aplicativo. Este tópico mostra como escrever um aplicativo que exibe dados de um objeto que contém um nome e uma cor, que é basicamente o mesmo que Guia de Início rápido: associando dados e estilos. Nesse caso, o objeto gerencia o processo de alteração por conta própria, em vez de responder a um botão que dispara a mudança.

Pré-requisitos

A leitura do guia de início rápido: associando dados e estilos a elementos HTML pode ajudá-lo a concluir as etapas neste tópico de instruções.

Instruções

Etapa 1: Configurando um projeto para usar associação

Crie um aplicativo em branco do Tempo de Execução do Windows em JavaScript e dê a ele o nome ObjectBinding.
Em default.html, adicione um elemento DIV à associação e atribua a ele um ID "objectBinding", um texto interno Welcome e um elemento SPAN que tenha ID "bindableSpan", conforme mostrado aqui.
```
<body>
    <div id="objectBinding">
      Welcome
      <span id="bindableSpan"></span>
    </div>
</body>
```

Etapa 2: Configurando um objeto complexo

Defina um objeto Person com campos de nome e cor, uma matriz de nomes, uma matriz de nomes de cores e um método privado que forneça um índice aleatório para a matriz. Para a definição desse objeto, você pode usar o método WinJS.Class.define. Adicione esse código à função anônima chamada imediatamente em 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); 
        }
    });

})();

Agora, adicione à definição Person (o segundo argumento passado para WinJS.Class.define) dois métodos públicos que iniciem e interrompam um processo que muda os campos de nome e cor a cada 500 milissegundos. A chamada completa para WinJS.Class.define está mostrada abaixo.


(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;
            }
        }
    });

})();

Etapa 3: Associando o objeto do HTML

No momento, o objeto Person não pode ser observado; ou seja, ele não fornece notificações quando muda. Podemos torná-lo observável combinando o objeto Person à funcionalidade de associação correta. A função WinJS.Class.mix adiciona ao objeto Person a funcionalidade do objeto WinJS.Binding.mixin que inclui um método bind e a funcionalidade da função WinJS.Binding.expandProperties que crias as propriedades no objeto para associação. Chame WinJS.Class.mix depois da definição do objeto Person. (Você precisa definir a classe Person antes de poder combinar algo com ela.)
```
WinJS.Class.mix(Person,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties({name: "", color: ""})
); 
```
Também é necessário chamar _initObservable dentro do construtor Person para configurar a propriedade _backingData. Altere o construtor Person da seguinte forma:
```
...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...
```
Depois que você tiver instanciado um objeto Person, poderá associá-lo às duas propriedades. O método bind pega dois parâmetros: o nome da propriedade ou do campo que será associado e uma função que especifica como será a associação. Essa função tem dois parâmetros: o novo valor e o antigo. Como bind é um método de instância, por enquanto nós apenas instanciaremos Person e chamaremos bind em seus campos de nome e cor. Adicione o seguinte código dentro do manipulador de eventos app.onactivated em 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;
    }
}
```
Aviso Não tente associar dados ao ID de um elemento HTML.

Para permitir a ocorrência de eventos de alteração, você deve alterar a função Person._newName.

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

Você pode testar a associação chamando o método Person.start.
```
myPerson.start();
```
Quando você compilar e executar o aplicativo, deverá ver isto:

Welcome, Harry

O nome e a cor do nome mudarão continuamente.

Tópicos relacionados

Guia de início rápido: associando dados e estilos a elementos HTML

Partilhar via