Win8 JS App: Wie kann man rückwärtige Navigation verhindern? Kann WinJS.Navigation.canGoBack nicht festlegen

Question

Ziemlich neu in der Entwicklung für Windows 8, arbeite ich an einer App, die ein ziemlich flaches Modell hat. Ich habe gesucht und gesucht, aber anscheinend keine klare Antwort gefunden, wie man eine WinJS-Seite so einstellt, dass die Rückwärtsnavigation verhindert wird. Ich habe versucht, mich in die API einzuarbeiten, aber es sagt nichts dazu.

Der Code, den ich zu verwenden versuche, ist

WinJS.Navigation.canGoBack = false;

Kein Glück, es beschwert sich immer über die schreibgeschützte Eigenschaft, aber es gibt keine Setzermethoden, um sie zu ändern.

Vielen Dank im Voraus, ~Sean

Answer 1

canGoBack hat nur einen Getter (definiert in base.js), und es spiegelt das Fehlen oder Vorhandensein des Backstack wider; nämlich nav.history.backstack.

Das Erscheinungsbild der Schaltfläche selbst wird durch das disabled-Attribut am zugehörigen Button-DOM-Objekt gesteuert, das wiederum Teil eines CSS-Selektors ist, der die Sichtbarkeit steuert. Wenn Sie also selbst am Display der Zurück-Schaltfläche herumbasteln, seien Sie sich bewusst, dass die Navigations-Plumbing dasselbe tut.

Das explizite Setzen des Backstacks ist möglich; es gibt ein Beispiel im Navigation and Navigation History Sample, das das Wiederherstellen eines Verlaufs sowie das Verhindern von Navigation mit beforenavigate enthält, mit dem folgenden Code:

    // in ready
    WinJS.Navigation.addEventListener("beforenavigate", this.beforenavigate);

    //
    beforenavigate: function (eventObject) {
        // Diese Funktion gibt Ihnen die Möglichkeit, die Navigation zu verhindern. Dies demonstriert diese Fähigkeit
        if (this.shouldPreventNavigation) {
            WinJS.log && WinJS.log("Navigation zu " + eventObject.detail.location + " wurde verhindert", "sample", "status");
            eventObject.preventDefault();
        }
    },

Answer 2

Du kannst canGoBack nicht ändern, aber du kannst den Knopf deaktivieren, um ihn zu verstecken und den Verlaufstapel freizugeben.

    // Rückwärtsknopf deaktivieren und verstecken
    document.querySelector(".win-backbutton").disabled = true;
    // Navigationsstapel freigeben
    WinJS.Navigation.history.backStack = [];

Dadurch wird das Zurückgehen verhindert und das Vorwärtsgehen weiterhin ermöglicht.

Answer 3

Also, viel Suche und Versuche mit verschiedenen Methoden zur Deaktivierung der Zurück-Schaltfläche, habe ich endlich eine anständige Lösung gefunden. Es wurde von einer anderen Frage auf Stackoverflow adaptiert.

Ursprünglicher Algorithmus: Wie man Element nach Klasse in JavaScript erhält?

---

MEINE LÖSUNG

Am Anfang einer Fragmentseite, genau wenn die Seitendefinition mit der Bereitschaftsfunktion beginnt, habe ich eine angepasste Version des obigen Algorithmus verwendet und die resultierende Elementauswahl verwendet, um das deaktivierte Attribut festzulegen.

        // Generierte Zurück-Schaltfläche abrufen
        var elems = document.getElementsByTagName('*'), i;

        for (i in elems)
        {
            if((" "+elems[i].className+" ").indexOf("win-backbutton") > -1)
            {
                var d = elems[i];
            }
        }

        // Deaktivieren der Zurück-Schaltfläche
        d.setAttribute("disabled", "disabled");

Der Code holt alle Elemente aus dem DOM der Seite und filtert sie nach der generierten Zurück-Schaltfläche. Wenn das richtige Element gefunden wird, wird es einer Variablen zugewiesen und von dort aus können wir die deaktivierte Eigenschaft festlegen.

---

Ich konnte nicht viel Dokumentation darüber finden, wie man die Standardnavigation in einer WinJS-Navigations-App umgeht, also hier sind einige Methoden, die fehlgeschlagen sind (zur Referenz):

• Das Element nach Klasse abrufen und einstellen | Könnte daran gescheitert sein, dass ich es falsch gemacht habe, da ich wenig Erfahrung mit HTML und JavaScript habe.

• Verwendung der obigen Methode, aber das Attribut innerhalb der for-Schleife setzen bricht die App ab und lässt sie aus unbekannten Gründen einfrieren.

• Setzen des Attributes in der default.js, bevor die Navigation abgeschlossen ist. | Die JavaScript-Aufrufe würden weder die aufgerufenen Methoden noch DOM-Elemente erkennen, vermutlich aufgrund des Initialisierungszustands der Seite.

Es gab noch einige andere, aber ich denke, es muss einen besseren Weg geben, um das Element nach dem Laden einer Seite abzurufen. Wenn mich jemand aufklären kann, wäre ich sehr dankbar. ~Sean R.