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
- Nós supomos que você possa criar um aplicativo da Windows Store básico em JavaScript que use controles WinJS. Para aprender a usar os controles WinJS, veja Guia de início rápido: adicionando controles e estilos WinJS.
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.