Verwenden des ListView-Steuerelements (HTML)

Applies to Windows and Windows Phone

Das ListView-Steuerelement kann Elemente in einer senkrechten oder waagrechten Liste darstellen. Der Benutzer kann dabei einzelne Elemente auswählen und verändern. Es wandelt Datenelemente mithilfe einer Datenquelle und einer von Ihnen angegebenen Vorlage in die entsprechende visuelle Darstellung um. Dieses Thema behandelt einige Aspekte des ListView-Steuerelements, die Sie zur Verbesserung der Leistung justieren können.

Leistung der Liste

Sie können einige Aspekte des ListView-Steuerelements justieren, um die Leistung zu verbessern:

  • Initialisierung: die Zeit von der Erstellung des Steuerelements bis zur Anzeige von Elementen auf dem Bildschirm
  • Verschiebung mit den Fingern: die Möglichkeit, das Steuerelement per Fingereingabe zu verschieben, wobei sich die Benutzeroberfläche den Fingerbewegungen anpasst
  • Bildlauf: die Möglichkeit, per Maus oder Tastatur einen Bildlauf für das Steuerelement auszuführen und die Ansicht zu aktualisieren
  • Interaktion zum Auswählen, Hinzufügen und Löschen von Elementen

Für das ListView-Steuerelement muss die App die Datenquellen und die Vorlagenfunktion bereitstellen, um das Steuerelement für die jeweilige App anzupassen. Dieses Zusammenspiel mit der ListView-Implementierung hat großen Einfluss auf die Gesamtleistung.

Optimieren der Datenquelle

Die Daten für ListView werden mithilfe von IListDataSource bereitgestellt. IListDataSource kann mit einer Reihe von Datenquellen arbeiten und unterstützt Virtualisierung, Bearbeitung und Änderungsbenachrichtigungen. "IListDataSource" kann Daten aus asynchronen und aus synchronen Datenquellen abrufen.

Synchrone Datenquellen (Binding.List)

Bei einer synchronen Datenquelle sind bereits alle Daten verfügbar oder rückgabebereit, oder die Datenquelle ist mit einer nahezu verzögerungsfreien Datenquelle verbunden (beispielsweise mit einer systemeigenen Komponente, die mit einer Windows-Runtime-API verfügbar gemacht wurde). Die Windows-Bibliothek für JavaScript verfügt über die integrierte Datenquelle WinJS.Binding.List, die auf ein speicherinternes Datenarray zugreift. Sofern der Datensatz nicht zu groß sind, ist WinJS.Binding.List die einfachste Möglichkeit, um Daten für das ListView-Steuerelement bereitzustellen. Da die Daten für WinJS.Binding.List in einem JavaScript-Array gespeichert sind, ist eine Skalierung auf sehr große Datensätze schwierig. Bei mehr als einigen tausend Elementen sollten Sie eine benutzerdefinierte Datenquelle in Betracht ziehen. Eine benutzerdefinierte Datenquelle kann synchron sein und Ergebnisse umgehend zurückgeben, dies funktioniert aber nur dann ordnungsgemäß, wenn die Ergebnisse wirklich umgehend verfügbar sind. Die ListView und der Datenquellcode werden üblicherweise im Hauptthread der Benutzeroberfläche ausgeführt, und der Thread der Benutzeroberfläche wird während synchroner Datenquellenvorgänge blockiert. In diesem Fall bleibt die Anwendung hängen und reagiert nicht mehr auf Benutzerinteraktionen. Verwenden Sie daher stattdessen den asynchronen Zugriff, wenn die Gefahr besteht, dass die Daten nicht immer umgehend verfügbar sind.

Verwenden asynchroner Datenquellen

Zum Verwenden des ListView-Steuerelements für die Anzeige einer benutzerdefinierten Datenquelle können Sie ein als benutzerdefinierte Datenquelle bekanntes Objekt erstellen, das die Logik zum Bereitstellen der Daten für das ListView-Steuerelement bereitstellt. Die ListViewverwendet zwei Schnittstellen zum Abrufen von Daten: IListDataAdapter und IListDataSource. So erstellen Sie eine benutzerdefinierte Datenquelle

(Umfassende Anweisungen hierzu finden Sie unter So wird's gemacht: Erstellen einer benutzerdefinierten Datenquelle.)

Dies ist die einfachste Methode, um eine benutzerdefinierte Datenquelle für die Verwendung mit ListView zu implementieren. In den nächsten Abschnitten erfahren Sie, wie Sie beim Entwickeln der Datenquelle die Leistung optimieren können.

Optimierungsstapel

IListDataSource ruft Elemente aus IListDataAdapter in erster Linie mithilfe folgender Funktionen ab:

Diese Methoden rufen eine Gruppe von Elementen ab. Sie fordern ein bestimmtes Element anhand des Index oder Schlüssels an und fragen einen Stapel von Datensätzen auf beiden Seiten des angeforderten Elements ab. Behandeln Sie countBefore und countAfter als Schätzungen. IListDataAdapter können mehr oder weniger Datensätze zurückgeben als angefordert, falls Daten auf diese Weise effizienter abgerufen werden können. Die Methoden geben einen IListDataAdapter für ein IFetchResult-Objekt mit einem Array von Datensätzen und zusätzlichen Metadaten zurück. Bei Bereitstellung zusätzlicher Daten erfolgt üblicherweise eine Zwischenspeicherung durch IListDataSource zur späteren Verwendung. Werden weniger Daten bereitgestellt, werden die abgerufenen Daten wieder an das Steuerelement übergeben (üblicherweise zum Rendern) und anschließend die noch fehlenden Daten angefordert.

Im Anschluss finden Sie einige Beispiele für Aufrufe von itemsFromIndex durch IListDataSource:

  • itemsFromIndex(0,0,1) – Mindeststapelgröße

    Hierbei handelt es sich um eine Anforderung von zwei Elementen ab Index 0. Wenn IListDataAdapter mit einem Webdienst verknüpft ist, ist das Abrufen von nur zwei Datensätzen unter Umständen nicht sehr effizient. Der Datenadapter ruft daher vom Webdienst ggf. die Datensätze 0 bis 9 ab und gibt sie zurück. IListDataAdapter speichert die acht zusätzlichen Datensätze für eine mögliche spätere Anforderung zwischen.

  • itemsFromIndex(40,1,200) – maximale Stapelgröße

    Hierbei handelt es sich um eine Anforderung für die Elemente 39 bis 240. Das Abrufen von 201 Elementen kann eine lange Verzögerung zur Folge haben, während der Server (oder eine andere Quelle) die Daten für die Anforderung berechnet. In diesem Fall begrenzt IListDataAdapter die Ergebnisse unter Umständen auf Stapel mit jeweils maximal 50 Datensätzen.

  • itemsFromIndex(40,1,200) – seitenbasierte Quellen

    Wir fordern weiterhin die Elemente 39 bis 240 an. Stellen Sie sich dabei aber vor, dass die Datenquelle so konzipiert ist, dass sie Elemente auf der Grundlage eines seitenbasierten Modells zurückgibt. Wenn die Seiten also beispielsweise jeweils 50 Datensätze umfassen, entspricht die Anforderung nicht genau den Seitenabgrenzungen. IListDataAdapter muss den Datensatz am Index (in diesem Fall 40) zurückgeben und dafür auf die erste Seite (0 – 49) zugreifen. Mit dieser Methode können entweder nur Datensätze von dieser Seite oder auch Ergebnisse von mehreren Seiten zurückgegeben werden.

Wie Sie diesen Anforderungen entnehmen können, ist bei Abfragen für IListDataAdapter – anders als bei den vorherigen Anforderungen – eine gewisse Überschneidung der Datensätze üblich. Mit dieser Überschneidung werden Fälle ermittelt, in denen dem Datensatz zwischen Anforderungen Elemente hinzugefügt oder aus dem Datensatz gelöscht wurden. Es ist besser, die Daten bereitzustellen. Werden die Daten nicht bereitgestellt, wird die Überschneidung jedoch normalerweise nicht automatisch erneut angefordert.

Inkrementelle Zählung

ListView benötigt eine Zählung der Datensätze im Dataset, um die Bildlaufgrenzen festlegen zu können. Die Datenquelle verfügt unter Umständen nicht immer über die exakte Elementanzahl. Dies gilt insbesondere, wenn die Berechnung der Anzahl zeitaufwändig ist. IListDataAdapter kann einen Schätzwert für die Anzahl von IListDataSource zurückgeben und die Anzahl nach und nach aktualisieren. Hierzu kann eine der folgenden Techniken verwendet werden:

  • Angeben einer neuen Anzahl im Rahmen der Antwort auf Elementanforderungen
  • Senden von Einfüge- oder Löschbenachrichtigungen, um anzugeben, dass zusätzliche Elemente gefunden wurden oder die Anzahl geringer ist als ursprünglich angegeben

Es ist besser, die Anzahl zu erhöhen als sie nach und nach zu verringern. Wenn Datensätze angefordert werden, IListDataAdapter eine geringere Anzahl von Datensätzen zurückgibt und keine Löschbenachrichtigungen gesendet hat, ermittelt IListDataSource den Verbleib der Datensätze und fordert die zwischengespeicherten Elemente erneut an, um sicherzugehen, dass sie noch gültig sind.

Bedarfsbasierte Felder für Datensätze

Je nach App besitzen die Datensätze für Elemente unter Umständen sehr große Felder, die bei Bedarf bereitgestellt werden können. Beispiel:

  • Eine App mit Miniaturbildern für Elemente, die als Blob gespeichert sind.
  • Eine Blog-App mit separaten Feldern – eins für die Zusammenfassung eines Beitrags, das andere für den vollständigen Text.

Es empfiehlt sich unter Umständen, nicht alle Felder in die ersten Abrufvorgänge von Datensätzen einzubeziehen. Verwenden Sie stattdessen besser einen separaten Aufruf, um diese Daten nur bei Bedarf bereitzustellen. Bei der Aktualisierung Ihrer Daten erzielen Sie die beste Leistung, wenn IListDataAdapterdie Daten mithilfe von Ereignissen oder mithilfe von Promise-Objekten bereitstellt, anstatt eine Änderungsbenachrichtigung für den Datensatz auszulösen.

Bei Verwendung einer Änderungsbenachrichtigung wird das Element neu gerendert, und es wird berechnet, ob die Position für gruppierte Ansichten aktualisiert werden muss.

Aktualisieren/Ändern von Datensätzen

Wenn die App Datensätze ändern muss, können die Änderungen inline oder durch Ersetzen des gesamten Datensatzes vorgenommen werden.

  • Wenn IListDataAdapter IListDataNotificationHandler.changed abruft, um anzuzeigen, dass ein Datensatz geändert wurde, wird das erneute Rendern des gesamten Datensatzes erzwungen, und ListView zeigt eine geänderte Animation.
  • Wenn IListDataAdapter die Objektidentität beibehält, kann das Feld direkt in den Daten aktualisiert werden, die Benutzeroberflächenebene muss jedoch informiert werden, damit die visuellen Objekte für das Element aktualisiert werden. Bei Verwendung einer Datenbindung wird die Benutzeroberfläche beim Vornehmen einer Änderung mithilfe von WinJS.Binding.as automatisch aktualisiert.

Diese Methode eignet sich gut für das progressive Aktualisieren der Felder für ein Element, beispielsweise wenn Ihre Elemente auf dem Dateisystem Bilder darstellen und Sie Miniaturansichten der Bilder anzeigen möchten. Das Abrufen des Miniaturbilds kann längere Zeit in Anspruch nehmen, daher sollten Sie zuerst die grundlegenden Dateidaten zurückgeben und den Datensatz später mit dem Miniaturbild aktualisieren.

Asynchrone Abrufmuster

Die ListView-Infrastruktur wurde mit dem Ziel entwickelt, die Nutzung des Benutzeroberflächenthreads zu verringern. Dies gilt besonders beim Warten auf Daten. Verwenden Sie möglichst immer asynchrone Methoden, damit IListDataAdapter den Benutzeroberflächenthread nicht blockiert und die Benutzeroberfläche stets reagiert. Viele APIs zum Abrufen von Daten – beispielsweise XMLHttpRequest (und die entsprechende Wrapper-Funktion WinJS.xhr) – sowie Dateisystem- und Windows-Runtime-APIs sind größtenteils asynchron.

Falls die benötigten Daten von einer blockierenden synchronen API bereitgestellt werden, verwenden Sie einen asynchronen Wrapper. Führen Sie den Aufruf beispielsweise über eine Web-Worker-API aus.

Verwenden von Gruppen

ListView kann Elemente in Gruppen darstellen. Zum Aktivieren der Gruppierung benötigt ListView eine separate Datenquelle mit Infos zu den Gruppen und den entsprechenden Größen. (Weitere Informationen finden Sie unter So wird's gemacht: Gruppieren von Elementen in einem ListView-Objekt.) Das ListView verwendet die groupKey-Eigenschaft von Elementen, um die Gruppe zu ermitteln, der ein Element angehört. Es wird eine Vorsortierung der Elemente erwartet, damit die Elemente für jede Gruppe zusammenhängend und in Gruppenreihenfolge dargestellt werden.

Die Gruppierung führt unter Umständen zu Leistungsproblemen:

  • Zur Berechnung der Gruppeninfos müssen die Elemente durchlaufen werden, um ihre Gruppendaten abzurufen. ListView benötigt die Informationen für alle Elemente auf dem Bildschirm oder im Pufferbereich für nicht sichtbare Elemente. Der Index des ersten Elements in der Gruppe ist ein Teil der Gruppeninformation. Wenn die Berechnung des Element-Offsets das Durchlaufen der Gruppenelemente erfordert, werden zahlreiche Daten für Elemente angefordert, die für die Ansicht nicht technisch erforderlich sind. Wenn das Objekt eine asynchrone Datenquelle verwendet und Teil einer großen Gruppe ist, muss es u. U. zahlreiche Datensätze abrufen, die nicht auf dem Bildschirm zu sehen sind, nur um deren Gruppengrenze zu bestimmen.
  • Bei Verwendung des SemanticZoom-Steuerelements

    Das SemanticZoom wird häufig mit einer gruppierte Auflistung verwendet, damit Benutzer schnell in der Liste navigieren können. Das bedeutet, dass die Liste der Gruppen häufig als verkleinerte Ansicht verwendet wird. Muss die App zum Anzeigen der verkleinerten Ansicht alle Elemente durchlaufen, führt dies wahrscheinlich zu Leistungsproblemen.

  • Die aus der Back-End-Datenquelle abgerufenen Daten werden nicht in der für die gruppierte Ansicht erforderlichen Reihenfolge für den Zugriff sortiert.

    Ist für das erneute Sortieren der Daten die Client-App erforderlich, kann sie keine effektive Datenvirtualisierung durchführen, da sie nicht von der richtigen Reihenfolge der Elemente abhängen kann.

  • Elemente werden eingefügt oder aktualisiert.

    Verglichen mit einer nicht gruppierten Liste ist das Einfügen und Bearbeiten von Elementen bei einer gruppierten Liste zeitaufwendiger, da die Elementdaten überprüft werden müssen, um zu ermitteln, ob die Änderungen auch Auswirkungen auf die Gruppenzugehörigkeit haben.

Eine Gruppierung funktioniert am besten, wenn die Daten beim Abrufen vorgruppiert sind und die Gruppendaten schnell und unabhängig von den Datenelementen abgerufen werden können.

Anzeigen von Elementen mit einer Vorlage oder einer Renderfunktion

ListView benötigt einen von Ihnen angegebenen Renderer, um die Datensätze für die Ausgabe in HTML zu konvertieren. Die Methode der Zusammenarbeit des ListView, der Datenquelle und des Renderers ist entscheidend für die Start- und Bildlaufleistung und steuert weitgehend das interaktive Erlebnis der Anwendung. Die zum Anzeigen einer Seite mit Daten benötigten Zeit hängt von der Komplexität des gerenderten Elements, der Anzahl der angezeigten Elemente (ein Produkt der Bildschirm- und Elementgröße), den Leistungsmerkmalen der Datenquelle und der Zielhardware ab.

Die Methode der App, Elemente zu rendern, kann optimiert werden, um die Leistung bzw. den Eindruck der Leistung zu verbessern. Dazu dienen z. B. Platzhalter, das Wiederverwenden von Elementen und progressives Rendern.

Ein Renderer kann auf zwei Arten erstellt werden: entweder durch Deklarieren eines WinJS.Binding.Template-Objekts oder durch Erstellen einer benutzerdefinierten Renderfunktion.

WinJS.Binding.Template

Um ein WinJS.Binding.Template-Objekt zu erstellen, definieren Sie mithilfe von HTML-Code eine Vorlage, die angibt, wie ein Element gerendert werden soll. Verknüpfen Sie in der Vorlage mithilfe der Datenbindung Eigenschaften der HTML-Elemente mit Feldern des Datensatzes.

Die Vorlage ist einfach zu verwenden, bietet aber nicht viele Steuerungsmöglichkeiten, was das Rendern von Elementen angeht. Die Behandlung von Platzhaltern wird nur eingeschränkt unterstützt. Die Datenbindung ist synchron, wenn die Daten bereitgestellt werden. Wenn Sie WinJS.Binding.Template mit einer synchronen Datenquelle kombinieren, ist das Rendering vollständig synchron.

Die Vorlage ermittelt anhand einer einfachen Logik, ob Elemente wiederverwendbar sind, entscheidet sich im Zweifel aber für die Erstellung neuer Elemente, wenn die Gefahr besteht, dass die Wiederverwendung eines Elements zur Darstellung des falschen Benutzeroberflächenelements führt. Bei Apps mit komplexen Elementen werden die Daten asynchron bereitgestellt. Im Falle von Leistungsproblemen empfehlen wir dagegen, anstelle der Vorlage eine benutzerdefinierte Renderfunktion zu verwenden.

Ab Windows 8.1 verwendet die Windows-Bibliothek für JavaScript 2.0 ein effizienteres System zum Verarbeiten von WinJS.Binding.Template-Objekten und trägt so zur Leistungssteigerung bei. Bei diesem System erfolgen Datenbindung und Steuerelementinstanziierung in einem flüssigeren parallelen Prozess und nicht wie bei der Windows-Bibliothek für JavaScript 1.0 nacheinander. Wenn Ihr Code von der vorherigen seriellen Verarbeitung abhängt, empfehlen wir Ihnen, den Code zu ändern, damit Sie von einer schnelleren Verarbeitung von Vorlagen profitieren können. Wenn Sie den Code nicht ändern können, verwenden Sie die disableOptimizedProcessing-Eigenschaft, um die Verarbeitung auf das vorherige Verhalten zurückzusetzen. Weitere Informationen finden Sie unter Beispiel für HTML-ListView-Elementvorlagen und Beispiel für Leistungsoptimierung mit HTML-ListView.

Benutzerdefinierte Renderfunktion

Sie können eine benutzerdefinierte Renderfunktion definieren, um einen Datensatz in eine entsprechende HTML-Darstellung zu konvertieren. Vorteile der Implementierung eines benutzerdefinierten Renderers:

  • Möglichkeit zum benutzerdefinierten Wiederverwenden von Elementen
  • Möglichkeit zum Bereitstellen von Platzhalterelementen
  • Möglichkeit zum progressiven Rendern von Elementen
  • Möglichkeit zum inkrementellen Anfordern von Daten (sofern erforderlich)

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 es dagegen erst später abgeschlossen.
  • recycledElement: Das DOM eines vorherigen Elements, das erneut verwendet werden kann, um neuen Inhalt anzuzeigen.

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 ist.

Die Renderfunktion wird für jedes Element einmal ausgeführt. Im Anschluss finden Sie ein Beispiel für eine benutzerdefinierte Renderfunktion:


function renderItem(itemPromise, recycledElement) {
    // bare minimal placeholder work - create element with class to give it a color and size.
    // and placeholder * { display: none; } or innerHTML = '' or removeChild() to hide the previous ui.
    if (!recycledElement) {
        recycledElement = document.createElement('div');
    }
    recycledElement.className = 'placeHolder';
    var renderComplete = itemPromise.then(function (item) {
        // Really quick paint of data.
        // If your placeholder logic above didn't clear innerHTML you do it here.
        // It would be good if it just did like 2 dom operations.
        Utilities.removeClassName(recycledElement, 'placeHolder');
        recycledElement.innerHTML = '<div class="title">' + item.data.title + '<div>';
        return item.ready;
    }).then(function (item) {
        // This is where you do the more intense stuff
        var imgEl = new Image();
        // in css start img as opacity: 0;
        recycledElement.appendChild(imgEl);
        imgEl.addEventListener('load', function () { WinJS.UI.Animations.fadeIn(imgEl); }, false);
        item.loadImage(item.data.someUrl, imgEl);
    });
    return { element: recycledElement, renderComplete: renderComplete };
}


Vorteile der Verwendung einer benutzerdefinierten Renderfunktion anstelle von WinJS.Binding.Template:

  • Sie können Platzhalter für nicht verfügbare Daten verwenden.

    Der Zweck der Renderfunktion ist die Erstellung des HTML-Codes für ein Element. Wenn Daten allerdings nicht verfügbar sind, soll die Benutzerinteraktion während des Datenabrufs natürlich nicht blockiert werden. Daten sind unter Umständen nicht verfügbar, wenn beispielsweise die App noch lädt oder der Benutzer einen schnellen Bildlauf ausführt. Sie die Daten nicht verfügbar, kann die Renderfunktion dennoch eine Platzhalter-DOM-Struktur bereitstellen, während sie auf die Daten wartet. Der von der benutzerdefinierten Renderfunktion bereitgestellte HTML-Code muss nicht für die gesamte Lebensdauer des Elements statisch sein. Dadurch richtet die Renderfunktion Rückruffunktionen ein, um den HTML-Code zu aktualisieren, wenn Daten verfügbar werden.

    Die Größe des Platzhalters muss der Größe des finalen Inhalts entsprechen. Außerdem muss der Platzhalter den gleichen Stammknoten verwenden. Nehmen Sie beim Auffüllen des Platzhalters möglichst wenig Änderungen an der DOM-Struktur vor, um die Zeit für die Erstellung des Elementlayouts zu verkürzen.

  • Sie können bestimmen, wie IItemPromise verarbeitet werden soll.

    Da die Daten unter Umständen nicht synchron verfügbar sind, erhält die Renderfunktion eine Zusage für die Daten (in Form eines IItemPromise-Objekts). Nach Erfüllung der Zusage werden die Daten an den then-Handler des IItemPromise-Objekts übergeben. Dadurch können Sie festlegen, wie die Renderfunktion die Ergebnisse zurückgeben soll:

    • Falls die Renderfunktion einen Platzhalter verwendet, kann sie einen Handler für IItemPromise registrieren, der ausgeführt wird, wenn die Daten verfügbar sind. Der Renderer gibt sofort einen Platzhalter zurück und verwendet dann den Handler, um den HTML-Code auf der Grundlage der Daten zu aktualisieren. So kann der Renderer beispielsweise beim Aufzählen einer Dateiliste für jede Datei einen Platzhalter anzeigen und diesen mit dem jeweiligen Dateinamen aktualisieren, sobald er verfügbar wird.
    • Wenn die Renderfunktion nicht sofort ein Ergebnis senden soll, kann sie für das HTML-Element ein Promise-Objekt zurückgeben und diese Zusage erfüllen, sobald IItemPromise abgeschlossen ist. Hier ist ein Beispiel:
      
      function renderItem(itemPromise, recycledElement) {
          // ignore the recycledElement to make the example simpler   
          var element = document.createElement('div');
          var complete = itemPromise.then(function (item) {
              // wait for the data and form the structure for the item
              element.innerHTML = '<div class="title">' + item.data.title + '<div>';
              return element;
          
          return { element: complete, renderComplete: complete };
      }
      
      
      
  • Sie können bestimmen, wie Elemente wiederverwendet werden sollen

    Das Aktualisieren der Eigenschaften einer vorhandenen DOM-Struktur ist in der Regel schneller als das Erstellen einer neuen DOM-Struktur. Bei vielen Elementen ist nur ein geringer Anteil des Markups, das die Daten rendert, für ein bestimmtes Element spezifisch. Dies können Sie durch Wiederverwendung der DOM-Elemente zu Ihrem Vorteil nutzen. Nehmen wir beispielsweise an, ListView führt einen Bildlauf in einer Gruppe von Elementen aus. Wenn sich die aktuelle Position beim Bildlauf von Elementen entfernt, werden diese aus der Struktur entfernt. Wenn sich die aktuelle Position beim Bildlauf dagegen Elementen nähert, wird neues Markup erstellt, um sie darzustellen. Anstatt nun also die DOM-Struktur für die alten Elemente zu verwerfen und neue Elemente zu erstellen, kann der Renderer die DOM-Struktur eines alten Elements wiederverwenden und deren Inhalt aktualisieren, um die Daten des neuen Elements anzuzeigen.

    Ihre Renderfunktion kann diese Funktion nutzen, indem Sie das vom recycledElement-Parameter bereitgestellte Element als Grundlage für das neue Element verwendet.

    Wenn Sie Elemente wiederverwenden:

    • Löschen Sie die Informationen des alten Elements, bevor Sie das wiederverwendete Element als Platzhalter nutzen.
    • 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 der recycledElement nicht für die Wiederverwendung geeignet, ignorieren Sie ihn, erstellen Sie ein neues Element, und es wird eine Garbage Collection der recycledElement durchgeführt.
  • Sie können aufwendige Arbeiten verschieben.

    Bei bestimmten Elementen ist der Aufwand zum Anzeigen höher. So lässt sich beispielsweise bei einer App, die eine Gruppe von Bildern aufführt, der Name eines Bilds schneller abrufen als das Miniaturbild. Beim Ausführen eines schnellen Bildlaufs muss das Abrufen der Basisdaten eine höhere Priorität haben als das Abrufen der Bilddaten. Sie können den Abruf abbrechen, wenn das Element aufgrund des Bildlaufs den sichtbaren Bereich des Bildschirms bereits wieder verlassen hat, bevor die Bilddaten abgerufen werden konnten.

    Ähnliches gilt bei Elementen mit komplexen Strukturen: Hier empfiehlt es sich unter Umständen, die entsprechenden Vorgänge erst nach Behandlung des grundlegenden Zustands auszuführen. Für Fälle dieser Art stellt IItemPromise ein geschachteltes Promise-Objekt mit der Bezeichnung "ready" bereit, das erst nach Fertigstellung des grundlegenden Renderings anderer Elemente abgeschlossen wird. Dieses Promise-Objekt kann verkettet werden und signalisieren, dass nun auch zeitaufwendigere Vorgänge ausgeführt werden können. Das Promise wird in der Regel fertiggestellt, nachdem die Zusagen aller Elemente in der Ansicht abgeschlossen wurden.

  • Sie können nicht mehr erforderliche Arbeitsaufgaben abbrechen.

    Wenn der Renderer ein Objekt als Ergebnis zurückgibt, ist eines der Felder des Objekts das renderComplete Promise. Dieses Promise informiert das ListView, wenn das Rendern des Objekts abgeschlossen ist. Die Renderfunktion ist für das Fertigstellen des Promise zuständig, nachdem sie alle Arbeitsaufgaben abgeschlossen hat. Bei Verwendung des Promise-Objekts vom Typ "ready" wird die Renderfunktion nach Abschluss der Vorgänge des Promise-Objekts vom Typ "ready" abgeschlossen. In der Regel wird dieses Promise gebildet, indem eine Gruppe von Promise-Objekten verkettet wird, die die Arbeitsaufgaben im Renderer übernehmen. Der Vorteil der Verwendung einer Verkettung von Promise-Objekten ist, dass renderComplete Promise abgebrochen wird, wenn das Rendern des Elements nicht mehr erforderlich ist. Wird eine Verkettung von Promise-Objekten abgebrochen, können noch nicht ausgeführte Funktionen in der Verkettung nicht mehr ausgeführt werden.

Zellenübergreifende Ansicht

Wenn Sie die layout-Eigenschaft des ListView-Steuerelements für die Verwendung eines GridLayout einstellen, kann die Funktion zum zum Übergreifen von Zellen zum Anzeigen von Elementen mit verschiedenen Größen in derselben Liste verwendet werden. Zellenübergreifende Elemente müssen ganzzahlige Vielfache der Basisgröße sein. Beträgt die Basisgröße also beispielsweise 100 x 100 Pixel, können größere Elemente eine Größe von 200 x 200 Pixel besitzen. Eine Größe von 150 x 200 Pixel ist dagegen nicht zulässig.

Das ListView bestimmt die Größe eines Elements mithilfe

  • der itemInfo-Funktion, wenn diese bereitgestellt wurde.
  • Andernfalls wird die Größe des Elements von der Renderfunktion zurückgegeben.

Beim Anfordern von Daten berechnet ListView anhand der Größe des allgemeinen Elements die potenzielle Anzahl der anzuzeigenden Elemente. Diese Information wird zum Festlegen der Anzahl der von der Datenquelle abzurufenden Elemente verwendet. Wird die Basisgröße auf einen zu kleinen Wert festgelegt, fordert ListView mehr Elemente an, als tatsächlich benötigt werden. ListView verwendet auch beim Anzeigen von zellenübergreifenden Elementen einen Packaalgorithmus. Bei vielfältigen Größenabweichungen dauert die Berechnung der Elementposition unter Umständen länger, was zu längeren Layoutdurchgängen und damit zu einer Verschlechterung der Bildlaufleistung führt.

 

 

Anzeigen:
© 2014 Microsoft