Comment créer une fonction de création de modèles (HTML)

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez comment créer une fonction de création de modèles qui génère des éléments pour un contrôle ListView.

Ce que vous devez savoir

Technologies

Prérequis

Nous partons du principe que vous savez créer une application élémentaire Windows Store en JavaScript qui utilise les contrôles WinJS. Pour obtenir des instructions sur l’utilisation des contrôles WinJS, voir Démarrage rapide : ajout de contrôles et styles WinJS.

Instructions

Étape 1: À propos des fonctions de création de modèles

Au lieu de définir un modèle d’élément dans le balisage, vous pouvez créer une fonction qui génère le rendu de chaque élément de liste. Le convertisseur utilise ces paramètres :

object renderItem(itemPromise, recycledElement)

itemPromise : un objet IItemPromise pour les données de l’élément à rendre. Avec une source de données synchrone, la promesse de l’objet IItemPromise est en général remplie, mais avec une source de données asynchrone, elle sera remplie ultérieurement.
recycledElement : le DOM d’un élément précédent qui peut être réutilisé pour afficher du nouveau contenu. Ce paramètre est facultatif.

Si vous utilisez le recyclage des éléments :
- veillez à supprimer les informations des anciens éléments avant d’utiliser les éléments recyclés comme espaces réservés. Lorsque vous avez recours au recyclage, l’ancien élément contient en général ses anciennes données et son état tel qu’il était lors de sa dernière utilisation. Effacez ou masquez l’état avant de réutiliser l’élément recyclé.
  
  Par exemple, si le modèle contient une photo, et si vous voulez réutiliser l’élément img bien que vous n’ayez pas encore la nouvelle URL, masquez l’élément img en définissant son opacité sur 0, car il peut contenir une photo parmi les anciennes données. Lorsque vous avez l’URL de la nouvelle photo, vous pouvez mettre à jour l’élément img et redéfinir son opacité sur 1.
- Si le code HTML d’un élément comporte un état conditionnel basé sur les données de l’élément, veillez à le réinitialiser lorsque l’élément est recyclé.
- Lors du recyclage des éléments, apportez le moins possible de modifications au DOM. Si la réutilisation de l’élément recycledElement n’est pas appropriée, ignorez-le et créez entièrement un élément. L’élément recycledElement sera récupéré.
Avertissement Le contrôle ListView peut changer la structure de recycledElement, aussi vérifiez que les éléments enfants existent avant d’essayer d’y accéder.

Le convertisseur doit retourner soit :

l’élément racine d’une arborescence DOM de l’élément ;
un objet qui contient ces propriétés :
- element : l’élément racine d’une arborescence DOM de l’élément ou une promesse qui, une fois remplie, retournera l’élément racine de l’élément.
- renderComplete : un objet Promise dont la promesse sera remplie une fois que l’élément est entièrement rendu.

Étape 2: Créer une fonction de rendu simple

Cet exemple récupère un contrôle ListView nommé templateFunctionListView et définit sa propriété itemTemplate avec un modèle d’élément qui affiche le title, le text et l’picture de chaque élément de données.

    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;
       });
    };

Remarques

Pour obtenir plus d’exemples, voir Exemple de modèles d’éléments du contrôle ListView.

Rubriques associées

Exemple de modèles d’éléments du contrôle ListView

Partager via