So wird’s gemacht: Erstellen einer Vorlagenfunktion (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Hier erfahren Sie, wie Sie eine Vorlagenfunktion erstellen, die Elemente für eine ListView generiert.

Wissenswertes

Technologien

Voraussetzungen

Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, die WinJS-Steuerelemente verwendet. Anweisungen zu den ersten Schritten mit WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Anweisungen

Schritt 1: Vorlagenfunktionen

Anstatt eine Elementvorlage im Markup zu definieren, können Sie eine Funktion erstellen, die jedes Listenelement rendert. Parameter für die Renderfunktion:

object renderItem(itemPromise, recycledElement)

itemPromise: Ein IItemPromise-Element für die Daten des zu rendernden Elements. Bei Verwendung einer synchronen Datenquelle ist IItemPromise üblicherweise bereits abgeschlossen. Bei Verwendung einer asynchronen Datenquelle wird die Zusage dagegen erst später abgeschlossen.
recycledElement : Das DOM eines vorherigen Elements, das erneut verwendet werden kann, um neuen Inhalt anzuzeigen. Dieser Parameter ist optional.

Wenn Sie Elemente wiederverwenden:
- Löschen Sie die Informationen des alten Elements, bevor Sie das wiederverwendete Element als Platzhalter nutzen. Wenn Sie Elemente wiederverwenden, enthält das alte Element wahrscheinlich alte Daten und den alten Zustand von seiner letzten Verwendung. Löschen Sie den Zustand, oder blenden Sie ihn aus, bevor Sie das Element wiederverwenden.
  
  Wenn die Vorlage z. B. ein Foto enthält und Sie das img-Element wiederverwenden möchten, die neue URL aber noch nicht kennen, blenden Sie das img-Element aus, indem Sie seine Undurchsichtigkeit auf 0 festlegen, da es möglicherweise ein Foto aus den alten Daten enthält. Sobald Sie die URL des neuen Fotos haben, können Sie das img-Element aktualisieren und seine Undurchsichtigkeit wieder in 1 ändern.
- Wenn der bedingte Zustand der HTML für ein Element auf den Elementdaten basiert, müssen Sie diesen bei der Wiederverwendung zurücksetzen.
- Beschränken Sie Änderungen am DOM auf ein Mindestmaß, wenn Sie Elemente wiederverwenden. Ist das recycledElement nicht für die Wiederverwendung geeignet, ignorieren Sie es, und erstellen Sie ein neues Element. Das recycledElement wird dann durch die Garbage Collection entfernt.
Warnung Die ListView kann die Struktur des recycledElement ändern. Testen Sie daher immer, ob untergeordnete Elemente vorhanden sind, bevor Sie auf sie zugreifen.

Die Renderfunktion muss eines der folgenden Objekte zurückgeben:

Das Stammelement einer DOM-Struktur für das Element.
Ein Objekt mit folgenden Eigenschaften:
- element: Das Stammelement einer DOM-Struktur für das Element oder eine Zusage, die bei ihrer Erfüllung das Stammelement für das Element zurückgibt.
- renderComplete: Ein Promise-Objekt, das abgeschlossen wird, wenn das Element vollständig gerendert wurde.

Schritt 2: Erstellen einer einfachen Renderfunktion

Dieses Beispiel ruft eine ListView mit dem Namen templateFunctionListView ab und legt ihre itemTemplate-Eigenschaft mit einer Elementvorlagenfunktion fest, die für jedes Datenelement title, text und picture anzeigt.

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

Anmerkungen

Weitere Beispiele finden Sie im Beispiel für ListView-Elementvorlagen.

Freigeben über