Cómo crear una función de plantillas (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Obtén información acerca de cómo crear una función de plantillas que genere elementos para ListView.
Lo que debes saber
Tecnologías
Requisitos previos
- Damos por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript que usa controles de WinJS. Para obtener instrucciones sobre cómo empezar a usar controles de WinJS, consulta Inicio rápido: Agregar controles y estilos de WinJS.
Instrucciones
Paso 1: Acerca de las funciones de plantillas
En lugar de definir una plantilla de elemento en el marcado, puedes crear una función que represente cada elemento de la lista. La función de representación usa los siguientes parámetros:
object renderItem(itemPromise, recycledElement)
itemPromise: una interfaz IItemPromise de los datos que representará el elemento. Con un origen de datos sincrónico, IItemPromise suele estar completo, pero con un origen de datos asincrónico, se completará en algún momento más adelante.
recycledElement : el DOM de un elemento anterior que puede volver a usarse para mostrar contenido nuevo. Este parámetro es opcional.
Si usas el reciclaje de elementos:
Borra la información del elemento antiguo antes de usar el elemento reciclado como un marcador de posición. Cuando usas el reciclaje, el elemento anterior probablemente contendrá el estado y datos anteriores de la última vez que se usó. Borra u oculta el estado antes de volver a usar el elemento reciclado.
Por ejemplo, si la plantilla contiene una foto y quieres volver a usar el elemento img pero aún no tienes la dirección URL nueva, oculta img; para ello, establece su opacidad en 0, porque puede contener una foto de los datos anteriores. Cuando tengas la dirección URL de la foto nueva, podrás actualizar el elemento img y volver a cambiar su opacidad a 1.
Si el HTML de un elemento tiene estado condicional en función de los datos del elemento, asegúrate de restablecerlo cuando se recicle.
Cuando recicles elementos, reduce al mínimo los cambios estructurales en el DOM. Si recycledElement no es adecuado para volver a usarlo, omítelo y crea un nuevo elemento desde cero, y recycledElement se recopilará como elemento no utilizado.
Advertencia ListView puede cambiar la estructura de recycledElement, de manera que siempre debes probar que existan elementos secundarios antes de intentar acceder a ellos.
La función de representación debe devolver:
El elemento raíz de un árbol DOM del elemento.
Un objeto que contenga estas propiedades:
element: el elemento raíz de un árbol DOM del elemento, o un compromiso de que, al finalizar, devolverá el elemento raíz del elemento.renderComplete: un elemento Promise que finaliza cuando el elemento se representó por completo.
Paso 2: Crear una función de representación simple
En este ejemplo, se recupera ListView con el nombre templateFunctionListView y se establece su propiedad itemTemplate con una función de plantilla de elemento que muestra el title, el text y la picture de cada elemento de datos.
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;
});
};
Observaciones
Para obtener más ejemplos, consulta la muestra de plantillas del elemento ListView.