Como usar modelos para associar dados (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]

Os modelos da Biblioteca do Windows para JavaScript são um modo conveniente de formatar e exibir várias instâncias de dados. Você pode usar esses modelos em conjunto com os objetos ListView e FlipView para especificar o modo de exibição deles. Você também pode usar um modelo para associar várias instâncias de um objeto de dados sem usar um modo de exibição predefinido. Para saber mais sobre como usar um modelo com um ListView, veja Guia de início rápido: adicionar um ListView. Para saber mais sobre como usar um modelo com um FlipView, veja Adicionando controles FlipView. O seguinte procedimento mostra como usar um modelo com uma matriz.

Você pode definir um modelo de forma declarativa como um controle WinJS e especificar a estrutura e o estilo internos dele. Mesmo que sejam declarados como elementos DIV, os modelos não são processados como parte de DOM e não são retornados como parte dos resultados de pesquisa de DOM. Você pode especificar o elemento DIV no qual deseja que o modelo apareça ou permitir que o método render crie seu próprio elemento DIV. Este tópico mostra como usar um modelo para associar um número variável de objetos de dados associáveis a um elemento DIV. O usuário escolhe o número de objetos que deseja exibir selecionando um item de uma lista suspensa.

Pré-requisitos

A leitura do Guia de início rápido: vinculando 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 um modelo

Para configurar um projeto a fim de usar um modelo, conclua as etapas a seguir.

Hh700356.wedge(pt-br,WIN.10).gif

Crie um aplicativo em branco da Windows Store em JavaScript e dê a ele o nome TemplateExample.
Dentro do elemento BODY do arquivo default.html, adicione um elemento DIV para o modelo e atribua a ele uma ID do templateDiv, e adicione um atributo data-win-control que tenha um valor de "WinJS.Binding.Template", conforme mostrado aqui.
```
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> 
</body>
```
Voltaremos para adicionar a estrutura interna do modelo após definirmos o objeto de dados.

Etapa 2: Definindo um objeto de dados associando-o aos campos do modelo

Dentro da função chamada imediatamente em default.js, declare um objeto que contém diversos campos. Neste caso, usaremos WinJS.Binding.define, que torna todas as propriedades associáveis.


(function () {
    "use strict";

    // Other app code ...

    // Define a Person object with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

})();

Para exibir os campos desse objeto no modelo, é necessária uma lista cujos itens correspondam aos campos do objeto de dados, conforme mostrado aqui. Adicione o seguinte código nas marcas BODY em default.html.

<div id="templateDiv" data-win-control="WinJS.Binding.Template">
    <div class="templateItem" data-win-bind="style.background: color">
        <ol>
            <li><span>Name :</span><span data-win-bind="textContent: name"></span></li>
            <li><span>Birthday:</span><span data-win-bind="textContent: birthday"></span></li>
            <li><span>Pet's name: </span><span data-win-bind="textContent: petname"></span></li>
            <li><span>Dessert: </span><span data-win-bind="textContent: dessert"></span></li>
        </ol>
    </div>
</div>

Abaixo do código de modelo em default.html, adicione um elemento DIV em que o modelo deve ser renderizado.
```
<div id="templateControlRenderTarget"></div>
```

Etapa 3: Controlando o número de objetos exibidos

Para fins deste exemplo, instanciaremos três objetos Person e adicionaremos uma lista suspensa, de modo que o usuário possa selecionar o número de objetos Person a exibir.

Dentro das marcas BODY em default.html, adicione o seguinte código.

<fieldset id="templateControlObject">
    <legend>Pick a name:</legend>
    <select id="templateControlObjectSelector">
        <option value="0">Show one</option>
        <option value="1">Show two</option>
        <option value="2">Show three</option>
    </select>
</fieldset>

Dentro da função anônima chamada imediata em default.js, crie uma matriz de três objetos Person.


(function () {
    "use strict";

    // Other app code ...

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({name:"Bob", color:"red", birthday:"2/2/2002", petname:"Spot", dessert:"chocolate cake"}),
        new Person({name:"Sally", color:"green", birthday:"3/3/2003", petname:"Xena", dessert:"cherry pie"}),
        new Person({name:"Fred", color:"blue", birthday:"2/2/2002", petname:"Pablo", dessert:"ice cream"}),
    ];

})();

3. Agora, adicione um ouvinte ao evento de alteração do seletor suspenso. Adicione esse código dentro do manipulador para o evento app.onactivated em default.js.

app.onactivated = function (args) {

    // Other activation code ...

    var selector = document.querySelector("#templateControlObjectSelector");
          selector.addEventListener("change", handleChange, false); 

}

No manipulador de eventos de alteração, encontre o elemento DIV que contém o modelo e o elemento DIV que especificar onde exibir os dados. Em seguida, chame render no controle do modelo (que você pode obter da propriedade wincontrol do elemento templateDiv). Quando você chama render no modelo, os campos relevantes do objeto de dados são vinculados aos itens de lista do modelo.

function handleChange(evt) {
    var templateElement = document.querySelector("#templateDiv");
    var renderElement = document.querySelector("#templateControlRenderTarget");
    renderElement.innerHTML = "";

    var selected = evt.target.selectedIndex;
    var templateControl = templateElement.winControl;

    while (selected >= 0) {
        templateElement.winControl.render(people[selected--], renderElement); 
    } 
}

Agora você pode compilar e depurar o aplicativo. Quando você fizer uma seleção na lista suspensa, o aplicativo exibirá o número correto de objetos de dados.

Etapa 4: Permitindo renderizar para adicionar um DIV

Você não tem que fornecer à função render um DIV que você criou; o render criará um novo DIV, se nenhum DIV for especificado. Entretanto, você deve adicionar o novo DIV ao DOM. Note que o valor de retorno do render é um WinJS.Promise. (Para saber mais sobre as promessas, veja Guia de início rápido: usando promessas.) No método done da promessa, adicione uma função que adiciona o novo DIV.

Mude o bloco while da etapa anterior como a seguir.


    while (selected >= 0) {
        templateElement.winControl.render(people[selected--])
            .done(function (result) {
                 renderElement.appendChild(result);
            });        
    }

Comentários

Aqui está a listagem completa do código neste tópico.

default.html (Windows)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- TemplateExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.html (Windows Phone)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateBinding</title>

    <!-- WinJS references -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- TemplateBinding references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.js (Windows e Windows Phone)


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            } else {

            }
       
            // Add event handler to selector. 
            var selector = document.querySelector("#templateControlObjectSelector");
            selector.addEventListener("change", handleChange, false);

            args.setPromise(WinJS.UI.processAll());

        }
    };

    app.start();

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({ name: "Bob", color: "red", birthday: "2/2/2002", petname: "Spot", dessert: "chocolate cake" }),
        new Person({ name: "Sally", color: "green", birthday: "3/3/2003", petname: "Xena", dessert: "cherry pie" }),
        new Person({ name: "Fred", color: "blue", birthday: "2/2/2002", petname: "Pablo", dessert: "ice cream" }),
    ];

    // Update the displayed data when the selector changes.
    function handleChange(evt) {
        var templateElement = document.querySelector("#templateDiv");
        var renderElement = document.querySelector("#templateControlRenderTarget");
        renderElement.innerHTML = "";

        var selected = evt.target.selectedIndex;
        var templateControl = templateElement.winControl;

        while (selected >= 0) {
            templateElement.winControl.render(people[selected--])
                .done(function (result) {
                    renderElement.appendChild(result);
                });        
        }
    }
})();

Tópicos relacionados

Guia de início rápido: adicionar um ListView

Adicionando controles FlipView

Compartilhar via