Schnellstart: Hinzufügen von Repeater-Steuerelementen

  • Artikel

[ 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 das Repeater-Steuerelement in Windows Store-Apps mit JavaScript verwenden, das einen einzelnen Datensatz als wiederholtes HTML-Markup darstellt.

Obwohl es dem ListView-Steuerelement dahingehend ähnelt, dass Sie an den HTML-Code Ihrer App Daten binden können, weist das Repeater-Steuerelement einige Unterschiede auf. Es ist ideal für kleinere, finite, statische Datensätze geeignet, für die eine geringere Funktionalität für die Benutzer erforderlich ist. Wenn es mit einem dynamischen Datensatz verbunden ist, eignet sich das Repeater-Steuerelement ideal für geringfügige, seltene Änderungen, die vom Entwickler kontrolliert werden. Zudem können Sie das Repeater-Steuerelement problemlos mit einem kleinen Regelsatz für Cascading Style Sheets (CSS) formatieren.

Voraussetzungen

Erstellen eines neues Projekts mit der Vorlage "Leere App"

  1. Starten Sie Microsoft Visual Studio Express 2013 für Windows.

  2. Klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.

  3. Erweitern Sie im Bereich Installiert die Einträge Vorlagen und JavaScript, und klicken Sie auf den Vorlagentyp Windows Store-App. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Fenster des Dialogfelds angezeigt.

  4. Wählen Sie im mittleren Bereich die Projektvorlage Leere App aus.

  5. Geben Sie im Textfeld Name den Eintrag Repeater-Demo ein.

  6. Klicken Sie auf OK, um das Projekt zu erstellen.

Hinzufügen der Repeater-Definition zum Projekt

Das Repeater-Steuerelement kann entweder deklarativ in einer HTML-Seite oder zur Laufzeit mithilfe von JavaScript-Code definiert werden, der mit der Seite geladen wird. In diesem Beispiel wird der Repeater deklarativ im HTML-Markup erstellt.

  1. Öffnen Sie default.html, und fügen Sie den folgenden HTML-Code in das <body>-Element ein. Der Hub sollte direkt dem <body>-Element untergeordnet sein.

    <div id="main-content">
    <h1>Great literature of Ancient Athens</h1>
    <div id="repeater" data-win-control="WinJS.UI.Repeater"
        data-win-options="{ data: Books.data }">
        <section>
            <h2 data-win-bind="textContent: bookTitle"></h2>
            <p><i data-win-bind="textContent: author"></i></p>
            <p data-win-bind="textContent: synopsis"></p>
        </section>
    </div>
</div>

  2. Fügen Sie in default.html in den <head>-Tags die folgenden <script> -Tags hinzu.

    <script src="/js/books.js"></script>

  3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner js, und klicken Sie auf Hinzufügen und dann auf JavaScript-Datei. Geben Sie im Dialogfeld Neues Element hinzufügen der neuen JavaScript-Datei den Namen "books.js", und klicken Sie dann auf Hinzufügen.

  4. Öffnen Sie die Datei books.js (js/books.js), und fügen Sie den folgenden JavaScript-Code hinzu.

    (function () {
    "use strict";

    // Define a data set as an array of objects.
    var books = [
        {
            bookTitle: "Anabasis",
            author: "Xenophon",
            synopsis: "10,000 Greek mercenaries, lost in Persia, work together to make their way home."
        },
        {
            bookTitle: "History of the Peloponnesian War",
            author: "Thucydides",
            synopsis: "The mighty cities Sparta and Athens war for supremacy over the Hellenes."
        },
        {
            bookTitle: "Antigone",
            author: "Sophocles",
            synopsis: "A young woman defies the king of the city by giving her father a proper burial."
        }
    ];

    // Convert the array into a List object.
    var booksList = new WinJS.Binding.List(books);

    // Expose the list globally in the 'Books' namespace.
    WinJS.Namespace.define("Books",
        { data: booksList });

})();

  5. Drücken Sie F5, um das Beispiel auszuführen.

    In der App werden drei Abschnitte angezeigt, wobei jedes einige Daten aus der List enthält, die durch die Books.data-Eigenschaft bereitgestellt wird.

In diesem Beispiel ist das zu wiederholende HTML-Fragment im Repeater-Steuerelement enthalten, das im HTML-Markup deklariert ist. (Sie können auch eine WinJS.Binding.Template verwenden, um das wiederholte HTML-Fragment zu definieren.) Das Repeater-Steuerelement im Beispiel stellt Elemente aus der Books.data-Liste dar, wobei jedes Element aus dem List-Objekt in einem eigenen HTML-Fragment angezeigt wird.

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie mithilfe einer einfachen statischen Datenquelle ein Repeater-Steuerelement mit drei wiederholten HTML-Fragmenten hinzugefügt.

Weitere Informationen zum dynamischen Hinzufügen oder Entfernen von Daten zu bzw. aus einem Repeater-Steuerelement finden Sie unter Beispiel für ein HTML-Repeater-Steuerelement.