Como criar uma função de modelo

Como criar uma função de modelagem (HTML)

[ 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 ]

Saiba como criar uma função de modelagem que gera itens para um ListView.

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Etapa 1: Sobre as funções de modelagem

Em vez de definir um modelo de item na marcação, você pode criar uma função que renderiza cada item da lista. A função de renderização usa os seguintes parâmetros:

object renderItem(itemPromise, recycledElement)

  • itemPromise: uma IItemPromise relativa aos dados para o item renderizar. Com uma origem de dados síncrona, uma IItemPromise, no geral, é concluída. Porém, com uma origem de dados assíncrona, ela será concluída em um momento posterior.
  • recycledElement : o DOM de um item anterior que pode ser reutilizado para exibir novos conteúdos. Este parâmetro é opcional.

    Se você usa reciclagem de elementos:

    • Limpe as informações do item antigo antes de usar o elemento reciclado como espaço reservado. Quando você usa a reciclagem, o item antigo provavelmente conterá os dados antigos e o estado da última vez em que foi usado. Limpe ou oculte o estado antes de reutilizar o elemento reciclado.

      Por exemplo, se o modelo tiver uma foto e você desejar reutilizar o elemento img, mas não tiver a nova URL ainda, oculpe o img definindo sua opacidade para 0 porque ele pode conter uma foto dos dados antigos. Quando você tem a URL da nova foto, pode atualizar o elemento img e alterar sua opacidade de volta para 1.

    • Se o código HTML de um item tiver um estado condicional com base nos dados do item, lembre-se de redefini-lo quando for reciclado.
    • Ao reciclar elementos, minimize as alterações estruturais no DOM. Se o recycledElement não for apropriado para reutilização, ignore-o e crie um novo elemento do zero, e o recycledElement irá para o lixo.
    Aviso  O ListView pode alterar a estrutura do recycledElement, por isso, sempre teste se os elementos filhos existem antes de tentar acessá-los.
     

A função de renderização deve retornar uma destas opções:

  • O elemento raiz de uma árvore DOM para o item.
  • Um objeto que contenha estas propriedades:

    • element: o elemento raiz de uma árvore DOM para o item ou uma promessa que, quando concluída, retorna o elemento raiz para o item.
    • renderComplete: uma Promise concluída quando os itens são completamente renderizados.

Etapa 2: Criar uma função simples de renderização

Este exemplo obtém um ListView denominado templateFunctionListView e define sua propriedade itemTemplate com uma função de modelo de item que exibe o title, o text e a picture de cada item de dados.


    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function () {
                var lView = document.getElementById("templateFunctionListView").winControl;
                lView.itemTemplate = itemTemplateFunction;

            }));

        }
    };

   function itemTemplateFunction(itemPromise) {

       return itemPromise.then(function (item) {
           var div = document.createElement("div");

           var img = document.createElement("img");
           img.src = item.data.picture;
           img.alt = item.data.title;
           div.appendChild(img);

           var childDiv = document.createElement("div");

           var title = document.createElement("h4");
           title.innerText = item.data.title;
           childDiv.appendChild(title);

           var desc = document.createElement("h6");
           desc.innerText = item.data.text;
           childDiv.appendChild(desc);

           div.appendChild(childDiv);
           
           return div;
       });
    };


Comentários

Para obter mais exemplos, veja o Exemplo de modelos de item do ListView.

Tópicos relacionados

Exemplo de modelos de item do ListView

 

 

Mostrar:
© 2017 Microsoft