Come creare una funzione di modello (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Informazioni su come creare una funzione di modello che genera elementi per ListView.
Cosa sapere
Tecnologie
Prerequisiti
- Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Store scritta in JavaScript che usi controlli WinJS. Per istruzioni di base sui controlli della WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Istruzioni
Passaggio 1: Informazioni sulle funzioni di modello
Invece di definire un modello di elemento nel markup, puoi creare una funzione che esegue il rendering di ogni elemento dell'elenco. La funzione di rendering accetta questi parametri:
object renderItem(itemPromise, recycledElement)
itemPromise: oggetto IItemPromise per i dati dell'elemento da sottoporre a rendering. Con un'origine dati sincrona, l'oggetto IItemPromise è in genere completo, mentre con un'origine dati asincrona verrà completato a un certo punto nel futuro.
recycledElement : DOM di un elemento precedente che può essere riusato per visualizzare nuovo contenuto. Questo parametro è facoltativo.
Se usi il riciclo degli elementi:
Cancella le informazioni del vecchio elemento prima di usare l'elemento riciclato come segnaposto. Se usi il riciclo, il vecchio elemento conterrà probabilmente dati obsoleti e lo stato relativo all'ultima volta in cui è stato usato. Cancella o nascondi lo stato prima di riusare l'elemento riciclato.
Se ad esempio il modello contiene una foto e vuoi riusare l'elemento img ma non hai ancora il nuovo URL, nascondi img impostando l'opacità su 0, perché potrebbe contenere una foto con i vecchi dati. Quando ottieni l'URL della nuova foto, puoi aggiornare l'elemento img e reimpostare l'opacità su 1.
Se l'HTML di un elemento ha uno stato condizionale basato sui dati dell'elemento, assicurati di reimpostarlo dopo il riciclo.
Per il riciclo degli elementi, riduci al minimo le modifiche strutturali a DOM. Se recycledElement non è idoneo per il riutilizzo, ignoralo e crea un nuovo elemento da zero. recycledElement verrà sottoposto a Garbage Collection.
Avviso ListView può cambiare la struttura di recycledElement, per cui verifica sempre che esistano elementi figlio prima di accedervi.
La funzione di rendering deve restituire:
L'elemento radice di un albero DOM per l'elemento.
Un oggetto contenente queste proprietà:
element: elemento radice di un albero DOM per l'elemento o una promessa che, quando completato, restituirà l'elemento radice dell'elemento.renderComplete: oggetto Promise che viene completato dopo il rendering completo dell'elemento.
Passaggio 2: Creazione di una semplice funzione di rendering
Questo esempio recupera un oggetto ListView denominato templateFunctionListView e imposta la relativa proprietà itemTemplate con una funzione di modello di elemento che visualizza title, text e picture di ogni elemento dati.
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;
});
};
Osservazioni
Per altri esempi, vedi gli esempi di modelli di elementi di ListView.