Guia de início rápido: associando dados e estilos (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]

Você pode associar dados e estilos a elementos HTML usando a associação da Biblioteca do Windows para JavaScript. A associação com a WinJS é unidirecional por padrão, significando que o elemento HTML é atualizado quando os dados e os valores de estilo mudam, mas os dados não são atualizados quando o elemento HTML muda. Este guia de início rápido mostra o tipo mais básico de associação, que é uma associação declarativa para um objeto simples que contém apenas dados. Para conhecer tipos de associação mais avançados, veja os tópicos Como associar um objeto complexo e Como usar modelos para associar dados.

Pré-requisitos

Este tópico presume que você possa criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter instruções sobre como criar o seu primeiro aplicativo, veja Criando o seu primeiro aplicativo em JavaScript.

Configurando um projeto de associação

Para configurar um projeto a fim de usar associação, conclua as etapas a seguir.

Crie um novo aplicativo em branco do Tempo de Execução do Windows em JavaScript e coloque o nome BindingApp.
Em default.html, adicione um elemento DIV à associação e atribua a ele um ID "basicBinding" e um texto interno Welcome, conforme mostrado aqui.
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

Associando dados

Você pode associar qualquer tipo de dados a um elemento HTML. Porém, para fins de ilustração, configuraremos apenas um objeto person que tem um campo de nome.

Aviso Não tente associar dados ao ID de um elemento HTML.

Em default.js, adicione a seguinte linha de código dentro da função anônima chamada imediatamente, logo depois da diretiva use strict.

(function () {
    "use strict";

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

    // Other app set-up code.
})();

Dentro do elemento DIV, adicione um elemento SPAN que acessa o campo person.name.

<div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

Você deve chamar WinJS.Binding.processAll para que o nome apareça. WinJS.Binding.processAll começa a procurar pelo atributo data-win-bind no elemento especificado e pesquisa todos os descendentes do elemento. O segundo parâmetro de WinJS.Binding.processAll fornece contexto de dados para injetar no elemento especificado. Adicione o seguinte código dentro do manipulador de eventos app.onactivated em default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
Quando você compilar e depurar o projeto, deverá ver isto:

Welcome, Fran
Considere o seguinte fragmento de código:
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- O sistema de associação WinJS usa uma camada observável para propagar as notificações de alteração.
- Quando você passa um objeto de dados para processAll como o contexto de dados, ele é encapsulado em uma chamada a WinJS.Binding.as, que cria ou se reúne com um proxy observável já criado para esse objeto.
- Todas as "gravações" (ou seja, conjuntos de propriedades) para as quais você deseja disparar notificações precisam ocorrer por essa camada de proxy; você poderá se reunir com o proxy observável via WinJS.Binding.as posteriormente.
- Em geral, o mais fácil a fazer é simplesmente usar esse proxy observável como seu objeto de leitura e gravação de dados.
- A associação única ocorre ao usar um inicializador de associação para substituir o comportamento padrão (por exemplo, WinJS.Binding.oneTime) ou tentar fazer associações com objetos que são não extensíveis (como objetos congelados ou projetados para WinRT).
Para demostrar o que acontece quando os dados subjacentes mudam, usaremos apenas um botão para simular a obtenção de dados de um processo diferente ou de um repositório de dados interno. Adicione um elemento BUTTON a default.html, abaixo de DIV.
```
<button id="btnGetName">Get name</button>
```

Adicione um método fictício que simule a obtenção dos dados. Neste caso, obteremos o nome de uma matriz usando um índice aleatório. Em default.js, adicione o código seguinte ao manipulador de evento app.onactivated que manipula o evento de clique do botão.

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

Para testar este código, compile e depure o aplicativo. Você deverá ver um nome diferente sempre que clicar no botão Get name.

Associando um estilo

Agora, associaremos a cor de fundo do elemento SPAN.

Em default.html, adicione um valor style.background ao atributo data-win-bind e defina sua associação como o campo de cor do objeto de pessoa.
```
<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>
```
Em default.html, adicione um campo de cor ao objeto de pessoa.

Dica Do lado esquerdo de uma expressão de vinculação está qualquer propriedade em um elemento e suas subpropriedades que usam a sintaxe JavaScript (que você usaria para atribuir-lhe programaticamente).
```
var person = { name: "Fran", color: "red" };
```

Também em default.js, no manipulador de evento app.onactivated, adicione uma segunda matriz de cores e altere a função getName para que ele atualize a cor do nome.

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

Lembre-se de alterar a chamada getName no manipulador de evento de clique do botão.

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

Quando você compilar e depurar o aplicativo, verá que clicar no botão Get name atualiza o nome e a cor do nome.

Resumo e próximas etapas

Neste guia de início rápido, você viu como associar um objeto JavaScript simples a um período HTML.

Para saber como associar objetos mais complexos, consulte o tópico sobre como associar um objeto complexo. Se quiser usar um modelo para associar vários objetos, consulte o tópico sobre como usar modelos para associar dados.

Partilhar via