Schnellstart: Verwenden der Einzelseitennavigation (HTML)

Artikel
12/12/2015

[ 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]

In diesem Thema wird das Modell der Einzelseitennavigation vorgestellt, und Sie erfahren, wie Sie dieses Modell mit PageControl-Objekten und WinJS.Navigation-Features in Ihrer eigenen App implementieren können.

Hilfe zur Auswahl des besten Navigationsmusters für die App finden Sie unter Navigationsmuster.

Außerdem können Sie das flache Navigationsmuster und das hierarchische Navigationsmuster in Aktion erleben, wenn Sie sich die Reihe App-Features – Gesamtübersicht ansehen.

Voraussetzungen

Wir gehen davon aus, dass Sie eine einfache App erstellen können. Wenn Sie Hilfe benötigen, lesen Sie Erstellen Ihrer ersten App mit JavaScript.
Es wird vorausgesetzt, dass Sie mit den Steuerelementen der Windows-Bibliothek für JavaScript vertraut sind. Informationen zur Verwendung der WinJS-Steuerelemente finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Stilen der Windows-Bibliothek für JavaScript.

Erstellen eines einfachen Links

Eine der einfachsten und am häufigsten verwendeten Formen der Navigation ist der Hyperlink. Mit dem folgenden Code wird ein Link erstellt, der zu "page2.html" navigiert.

<p><a href="page2.html">Go to page 2</a></p>

Da es sich um einen relativen Link handelt, geht das System davon aus, dass "page2.html" eine lokale Seite ist, die zu Ihrer App gehört und sich auf die Basis-URL des aktuellen Dokuments bezieht. Wenn der Link beispielsweise in /folder/default.html angezeigt wird, gelangen Sie beim Klicken auf den Link zu /folder/page2.html.

Hinweis Wenn Sie Ihre App für die Lokalisierung optimiert haben (was immer von Vorteil ist), variiert dieses Verhalten basierend auf Ihren Ordnern mit lokalisiertem Inhalt unter /folder/. Weitere Informationen finden Sie unter Globalisieren Ihrer App.

Wenn Sie die vollständige URI für eine lokale Datei in der App explizit angeben möchten, verwenden Sie das neuen URL-Schema für verpackten Inhalt ("ms-appx") wie folgt:

**ms-appx://package name/**file path

Der Paketname kann ggf. weggelassen werden.

**ms-appx:///**file path

Hier sehen Sie ein Beispiel.

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

Sie können mit dem URL-Schema "ms-appx" auf jede Datei im Paket der App verweisen. Es wird jedoch empfohlen, relative URLs zu verwenden, da sie basierend auf der Basis-URL des Dokuments automatisch aufgelöst werden.

Einzelseitennavigation: das empfohlene Modell

Im vorhergehenden Beispiel wurde gezeigt, wie Sie einen Link erstellen, mit dem auf oberster Ebene navigiert wird. Dies ist für eine Webseite geeignet, in einer App sollte jedoch aus u. a. folgenden Gründen keine Navigation auf oberster Ebene erfolgen:

Beim Laden der nächsten Seite ist der App-Bildschirm leer.
Der Skriptkontext wird gelöscht und muss erneut initialisiert werden. Möglicherweise empfängt die App Systemereignisse, ohne sie zu behandeln, weil der Skriptkontext gelöscht und neu initialisiert wird.

Die Einzelseitennavigation bietet eine bessere Leistung und eine app-ähnlichere Benutzerfreundlichkeit als die Navigation auf der obersten Ebene Navigationssteuerelemente werden in neuen Microsoft Visual Studio-Projekten nicht automatisch bereitgestellt. Daher bedeutet eine Navigation auf der obersten Ebene zu einer Seite, dass es keine Möglichkeit gibt, zurück zur ersten Seite zu gelangen, es sei denn, Sie erstellen zu diesem Zweck manuell einen Link oder einen anderen Navigationsmechanismus. Zudem definieren Sie auf der Startseite, wie die App ihren Lebenszyklus verwaltet – wie sie sich beim Starten, Beenden oder Anhalten verhält. Wenn Sie mehrere Seiten auf oberster Ebene haben, muss jede dieser Seiten Logik zum Verwalten des Lebenszyklus und Status der App enthalten.

Mit welchem Steuerelement sollten Sie Inhalt in die Hauptseite laden?

Sie können das Dokumentobjektmodell (DOM) verwenden, um Dokumente aus einer anderen Quelle zu laden.
Für einfache HTML-Inhalte (Inhalte, die nicht interaktiv sind und keine Skriptverweise enthalten) können Sie ein HtmlControl-Objekt verwenden.
Für externe Webinhalte verwenden Sie wenn möglich das x-ms-webview-Steuerelement. Im Vergleich zu einem iframe-Element bietet dieses Steuerelement bessere Isolation, Navigation, SmartScreen Filter-Verfügbarkeit und Unterstützung für Websites, die nicht in einem iframe-Element gehostet werden können.
Für alle anderen Inhalte verwenden Sie ein Page-Steuerelement.

Visual Studio enthält verschiedene neue JavaScript-Projektvorlagen für Apps, die das Verwalten der Navigation vereinfachen. Diese Projektvorlagen enthalten das Navigationssteuerelement PageControlNavigator, mit dem Sie zwischen PageControl-Objekten navigieren können. Die PageControlNavigator-Klasse ist eine Möglichkeit, die Einzelseitennavigation mithilfe des PageControl-Objekts zu vereinfachen.

In den nächsten Schritten wird beschrieben, wie Sie eine App mit mehreren PageControl-Objekten erstellen und die Einzelseitennavigation zum Navigieren zwischen diesen Seiten verwenden.

Schritt 1: Erstellen eines neuen Projekts für eine Navigations-App

Starten Sie Microsoft Visual Studio 2013 Update 2.

Hinweis Wenn Sie Visual Studio zum ersten Mal ausführen, werden Sie auf die Entwicklerlizenz hingewiesen.
Wählen Sie Datei > Neues Projekt, oder klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.
Erweitern Sie links im Bereich Vorlagen die Optionen Installiert => Vorlagen => JavaScript => Store-Apps.
Wählen Sie den Vorlagentyp Universal-Apps aus. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Bereich des Dialogfelds angezeigt.
Wählen Sie im mittleren Bereich die Projektvorlage Navigations-App (Universal-Apps) aus.
Geben Sie in das Textfeld Name einen Namen für Ihr Projekt ein. In den Beispielen in diesem Thema wird "NavigationAppExample" verwendet.
Klicken Sie auf OK, um das Projekt zu erstellen.

Ihr neues Navigations-App-Projekt enthält eine Startseite, eine Homepage und einige weitere unterstützende Dateien. Im Projektmappen-Explorer wird es wie folgt dargestellt.

Das neue Navigations-App-Projekt enthält eine Reihe von Dateien. Einige sind spezifisch für Windows-Apps, einige sind spezifisch für Phone-Apps, und einige gelten für beide.

Das Projekt enthält die folgenden HTML-Dateien:
- default.html—die Startseite Sie wird als Erstes geladen. Sie enthält eine Instanz des PageControlNavigator-Steuerelements (das jede Seite in das Hauptfenster lädt), und hier erstellen Sie ggf. die AppBar für Ihre App.Hinweis HTML-Seiten werden in einen einzelnen Inhaltshost geladen, ein in "default.html" deklariertes div-Element. In "default.html" wird das div-Element des Inhaltshosts als Steuerelement vom Typ PageControlNavigator deklariert. Dafür wird das data-win-control-Attribut verwendet, das von der Windows-Bibliothek für JavaScript (WinJS) bereitgestellt wird.
- home.html— die Homepage Sie zeigt eine Willkommensmeldung an.
Das Projekt enthält die folgenden JavaScript-Dateien:
- default.js gibt das Verhalten der App beim Start an.
- home.js gibt das Verhalten für die Startseite an.
- navigator.js implementiert das PageControlNavigator-Objekt, das das Navigationsmodell für die JavaScript-Vorlagen für Windows Store-Apps unterstützt.
Das Projekt enthält die folgenden CSS-Dateien:
- default.css gibt die CSS (Cascading Style Sheets)-Formatvorlagen für die Inhaltshostseite und für die gesamte App an.
- home.css gibt die CSS-Formatvorlagen für die Homepage an.
Das Projekt enthält außerdem die Datei package.appxmanifest, in der das App-Paket beschrieben wird. Zudem enthält das Projekt mehrere Bilddateien, z. B. splashscreen.png für das Bild des Begrüßungsbildschirms und die Bilddatei storelogo.png, die für den Windows Store verwendet wird.
Führen Sie die App aus. Wählen Sie Debuggen > Debuggen starten, oder drücken Sie F5 (SHIFT + F5 um das Debuggen zu beenden und zu Visual Studio zurückzukehren).

Hier sehen Sie einen Screenshot der Windows-App.

Hier sehen Sie einen Screenshot der Phone-App.

Beachten Sie, dass der angezeigte Inhalt nicht in der Datei "default.html" definiert wird. Er wird in der Datei "home.html" definiert, einem eigenen page-Steuerelement. Das PageControlNavigator-Steuerelement ruft den Inhalt der Homepage ab und zeigt ihn in "default.html" an.

Hier ist das Navigationssteuerelement PageControlNavigator dargestellt. Es definiert mehrere Funktionen, die für die Navigation verwendet werden. Dieses Steuerelement ist in navigator.js implementiert.
```
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});
```
Die Konstruktorfunktion führt die Initialisierung für das Navigationssteuerelement aus. Zu den wichtigen Initialisierungsaufgaben zählen das Festlegen von Handlern für WinJS-Ereignisse (beispielsweise das WinJS.Navigation.onnavigating-Ereignis) sowie das Festlegen der Startseite der App. (Der Wert für die Startseite wird im contenthost DIV-Element in einem data-win-options-Attribut angegeben.)
```
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
```
Ein DIV-Element, das als Navigationssteuerelement der App (in "default.html") deklariert ist, stellt den Inhaltshost für alle App-Seiten bereit. Das DIV-Element verwendet das WinJS-data-win-control-Attribut, um sich selbst als Navigationssteuerelement zu deklarieren. Dieses Steuerelement stellt das Navigationsmodell für die App bereit. Sämtlicher Seiteninhalt wird in dieses DIV geladen.

Im Folgenden sehen Sie das vollständige Markup für die Seite "default.html".
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</title>

    
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" 
        data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    
</body>
</html>
```
Diese Abbildung zeigt die unterschiedlichen Inhaltseinheiten, die im Fenster der App angezeigt werden:

In den nächsten Schritte erfahren Sie mehr zum Hinzufügen von Seiten mit den Objekten PageControlNavigator und PageControl.

Schritt 2: Erstellen einer neuen Seite

Ein PageControl-Steuerelement ist eine modulare Einheit von HTML, CSS und JavaScript, die als eine logische Seite fungiert.

Beim Hinzufügen einer neuen Seite zu einem Visual Studio 2013-Projekt müssen Sie die folgenden Aktionen ausführen:

Hinzufügen der neuen Seite mithilfe der Visual Studio-Elementvorlage „Seitensteuerung“
Hinzufügen von Code zum Navigieren zu der neuen Seite mithilfe der WinJS.Navigation.navigate-Funktion. Tipp Diese Funktion führt die Navigation zwar nicht direkt aus, aber sie ruft das Ereignis WinJS.Navigation.onnavigated auf, das in „navigator.js“ behandelt wird. Der Code in „navigator.js“ ruft die ready-Funktion auf Ihrer neuen Seite auf. Eine Änderung von „navigator.js“ ist normalerweise nicht erforderlich.
Fügen Sie Ihrer App bei Bedarf UI und Ereignishandler hinzu, um den Seitennavigationscode aufzurufen.

Eine Seite verfügt über eine Gruppe vordefinierter Methoden, die die Bibliothek automatisch in einer vorgegebenen Reihenfolge aufruft. Die WinJS.UI.Pages.define-Funktion macht diese Methoden für die Implementierung verfügbar.

Hh452768.wedge(de-de,WIN.10).gif Hinzufügen einer Seite

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner pages, und wählen Sie Hinzufügen > Neuer Ordner aus.Hinweis Für dieses Beispiel fügen wir eine gemeinsam genutzte Seite hinzu. Sie können dem Windows-Projekt oder dem Phone-Projekt nach Bedarf eindeutige Seiten hinzufügen.
Benennen Sie den Ordner page2.
Klicken Sie mit der rechten Maustaste auf den Ordner page2, und wählen Sie Hinzufügen > Neues Element.
Wählen Sie im Dialogfeld Neues Element hinzufügen im mittleren Bereich Seitensteuerung aus.
Nennen Sie die Seite page2.html, und wählen Sie Hinzufügen.

Die Datei page2.html wird zusammen mit zwei anderen Projektdateien (page2.css und page2.js) im Ordner page2 erstellt. Zusammen stellen diese Dateien eine logische Seite dar.

Tipp Falls Sie die Elementvorlage an anderer Stelle in das Projekt einfügen, müssen Sie unter Umständen Skript- und CSS-Verweise in der Datei page2.html aktualisieren.

Öffnen Sie "page2.js", und überprüfen Sie, ob die URI in der define-Funktion korrekt ist. Die Funktion sollte folgendermaßen aussehen:

WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

Schritt 3: Anpassen der Seite

Ändern Sie jetzt die neue Seite, sodass sie eine andere Meldung und den Wochentag anzeigt.

Öffnen Sie page2.html. Die Elementvorlage zur Seitensteuerung erstellt eine HTML-Seite, die einen Headerabschnitt (mit einer "Zurück"-Schaltfläche) und einen Abschnitt für den Hauptinhalt der Seite enthält.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

Ersetzen Sie den "main content"-Abschnitt durch den folgenden Abschnitt.


        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

Die Datei page2.html sollte jetzt wie folgt aussehen:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

Öffnen Sie page2.js. Das PageControl-Steuerelement enthält eine Gruppe vordefinierter Funktionen, die automatisch in vorgegebener Reihenfolge aufgerufen werden. Die Elementvorlagen zur Seitensteuerung enthalten die Funktionen ready, updateLayout und unload.

Das PageControlNavigator-Element ruft die updateLayout-Funktion auf, wenn der Benutzer zwischen Hoch- und Querformat wechselt oder die Fenstergröße der App ändert. In diesem Thema wird nicht gezeigt, wie Sie die updateLayout-Funktion definieren, aber jede App sollte dazu in der Lage sein. Siehe Richtlinien für die Größenänderung von Fenstern für hohe und schmale Layouts und Reaktionsfähiges Design für UWP-Apps (Universelle Windows-Plattform) – Grundlagen.

Die ready-Funktion wird aufgerufen, wenn das DOM der Seite geladen wurde, Steuerelemente aktiviert sind und die Seite in das Haupt-DOM geladen wurde.

(Das PageControl-Steuerelement unterstützt zusätzliche Funktionen für Lebenszyklus der Seite. Weitere Informationen finden Sie unter Hinzufügen von Seitensteuerelementen.

Hier ist die Datei page2.js, die von der Elementvorlage zur Seitensteuerung erstellt wurde.
```
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();
```

Ändern Sie die ready-Funktion so, dass sie den in Schritt 2 erstellten Bereich ("dayPlaceholder") abruft und seine innerText-Eigenschaft auf den aktuellen Tag festlegt.


// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

Sie haben eine Seite erstellt und angepasst. Im nächsten Schritt ermöglichen Sie es dem Benutzer, der die App ausführt, zu Ihrer Seite zu navigieren.

Schritt 4: Verwenden der Navigationsfunktion, um zwischen Seiten zu wechseln

Wenn Sie die App jetzt ausführen, zeigt sie home.html an, und der Benutzer kann nicht zu page2.html navigieren. Eine einfache Methode, um dem Benutzer beim Öffnen von page2.html zu helfen, ist das Hinzufügen eines entsprechenden Links auf home.html.


<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

Wenn Sie die App ausführen und auf den Link klicken, scheint es zu funktionieren; die App zeigt page2.html an. Das Problem ist, dass die App eine Navigation auf oberster Ebene ausführt. Anstatt von "home.html" zu "page2.html" zu navigieren, navigiert sie von default.html zu page2.html.

Ausführen einer Navigation auf oberster Ebene.

Sie möchten aber, dass stattdessen der Inhalt von home.html durch page2.html ersetzt wird.

Empfohlene Navigation zu "page2.html".

Glücklicherweise kann mit dem PageControlNavigator-Steuerelement diese Art von Navigation recht leicht durchgeführt werden. Der PageControlNavigator-Code (in der Datei navigator.js der App) behandelt das WinJS.Navigation.onnavigated-Ereignis für Sie. Wenn das Ereignis auftritt, lädt das PageControlNavigator-Steuerelement die vom Ereignis angegebene Seite.

Das WinJS.Navigation.navigated-Ereignis tritt auf, wenn Sie die Funktionen WinJS.Navigation.navigate, WinJS.Navigation.back oder WinJS.Navigation.forward zum Navigieren verwenden.

Sie müssen WinJS.Navigation.navigate selbst aufrufen, statt das Standardverhalten des Links zu verwenden. Sie können den Link durch eine Schaltfläche ersetzen und mit dem Click-Ereignishandler für die Schaltfläche WinJS.Navigation.navigate aufrufen. Alternativ können Sie das Standardverhalten des Links ändern, sodass von der App WinJS.Navigation.navigate zum Navigieren zum Linkziel verwendet wird, wenn der Benutzer darauf klickt. Behandeln Sie hierzu das click-Ereignis des Links, und beenden Sie mithilfe des Ereignisses das Standardnavigationsverhalten des Links. Rufen Sie anschließend die WinJS.Navigation.navigate-Funktion auf, und übergeben Sie ihr das Linkziel. So wird's gemacht:

Definieren Sie in der Datei home.js einen click-Ereignishandler für Ihre Hyperlinks.
```
function linkClickEventHandler(eventInfo) {

}
```
Rufen Sie die preventDefault-Methode auf, um das Standardlinkverhalten (direkte Navigation zur angegebenen Seite) zu verhindern.
```
function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}
```

Rufen Sie den Link ab, der das Ereignis ausgelöst hat.

function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

Rufen Sie die WinJS.Navigation.navigate-Funktion auf, und übergeben Sie ihr das Linkziel. (Optional können Sie auch ein Zustandsobjekt übergeben, das den Zustand für diese Seite beschreibt. Weitere Informationen finden Sie unter WinJS.Navigation.navigate.)
```
function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}
```

Fügen Sie in der ready-Funktion der Datei home.js den Ereignishandler an die Links an.

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

Dies ist der letzte Schritt. Hier sehen Sie den vollständigen Code für die Datei home.js:


// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

Führen Sie die App aus, und klicken Sie auf den Link für page2.html. Folgendes wird angezeigt.

Bildschirm "page2.html" mit einer Zurück-Schaltfläche

Jetzt wird die Seite mit dem richtigen Navigationsmuster angezeigt.

Inhaltsgliederung nach der Navigation zu "page2.html".

Die Vorlage für das Page-Steuerelement enthält eine "Zurück"-Schaltfläche, die aktiviert wird, wenn Sie die WinJS.Navigation-Funktionen zum Navigieren verwenden. Wenn Sie die WinJS.Navigation-Funktionen verwenden, speichert die App den Navigationsverlauf. Mithilfe dieses Verlaufs können Sie rückwärts navigieren, indem Sie WinJS.Navigation.back aufrufen, oder vorwärts, indem Sie WinJS.Navigation.forward aufrufen.

Hinweis Windows Store-Apps verwenden in der Regel eines von zwei Navigationsmustern (flach und hierarchisch). Die Verwendung des BackButton-Objekts in App mit flachem Navigationsmuster wird nicht empfohlen. Einzelheiten finden Sie unter Navigationsmuster.

Speichern des Navigationsverlaufs bei angehaltener App

Der Navigationsverlauf wird nicht automatisch gespeichert, wenn die App angehalten oder heruntergefahren wird. Sie können diese Informationen jedoch leicht selbst speichern. Sie können den Navigationsverlauf mit der WinJS.Navigation.history-Eigenschaft abrufen und ihn mit dem WinJS.Application.sessionState-Objekt speichern. Damit das Anhalten und Fortsetzen reibungslos verläuft, sollten diese Informationen jedes Mal gespeichert werden, wenn Benutzer die Navigation verwenden.

Rufen Sie, wenn die App fortgesetzt wird, die Verlaufsinformationen aus dem WinJS.Application.sessionState-Objekt ab, und verwenden Sie sie zum Festlegen der WinJS.Navigation.history-Eigenschaft.

Ein Beispiel für die Verwendung des WinJS.Application.sessionState-Objekts zum Speichern und Wiederherstellen von Sitzungsdaten finden Sie unter Teil 2: Verwalten von App-Lebenszyklus und -Zustand. Weitere Informationen zum Anhalten und Fortsetzen finden Sie unter Starten, Fortsetzen und Multitasking.

Zusammenfassung

In diesem Thema haben Sie erfahren, wie Sie Objekte und Methoden des WinJS.UI.Pages-Namespace zur Unterstützung des Modells für Einzelseitennavigation verwenden.

In diesem Thema haben Sie erfahren, wie Sie Apps mit dem Modell für Einzelseitennavigation erstellen. Sie haben mit der PageControlNavigator-Klasse aus den Vorlagen dieses Modell in Ihrer eigenen App mit PageControl-Objekten und WinJS.Navigation-Features implementiert.

Freigeben über