Polymer Core-animierte Seiten Standardseite

Question

Ich verwende die Polymercore-animated-pages, um zwischen meinen Websites Hauptseiten zu wechseln.

Ich wähle aus, welche Seite mit der ID <section> angezeigt werden muss. Sie können ein Beispiel in Aktion here sehen. Nun, das Problem, das ich habe, ist, dass beim Laden der Seite, die Seite, die ausgewählt werden soll, von der URL geladen wird, zB www.example.com/home zeigt die Homepage, www.example.com/activities zeigt die Aktivitäten Seite (Code aus Beispiel weggelassen da nicht wirklich relevant)).

Aber was soll ich tun, wenn die ID in der Verknüpfung nicht existiert? Gibt es eine Option, um eine Standardseite core-animated-pages mit einer 404-Nachricht anzuzeigen? Oder muss ich jeden Link überprüfen, wenn er sich in einem Array aller meiner Seiten befindet, wenn die Fehlerseite manuell geladen wird und sonst die richtige Seite angezeigt wird?

Auch hier ist das Beispiel: jsbin.

Bearbeiten: Um zu zeigen, wie meine Seite Verknüpfungen behandelt, hier ist ein Update-Beispiel: jsbin. Verbindung ist im Wesentlichen www.example.com/#home, und so weiter

Answer 1

Es gibt ein paar Dinge, die Sie hier tun könnten.

Im einfachsten Fall könnten Sie einfach den Wert im pageChanged-Handler validieren. Wenn die Seite nicht existiert, aktualisieren:

pageChanged: function(){ var foundPage = this.$.pages.querySelector('#' + this.page); if (! foundPage) { this.page = 'error' } ...

See: http://jsbin.com/xequvone/14/edit

Wenn Sie die core-menu direkt an die core-animated-pages nicht binden, können Sie hinzufügen, was Logik, die Sie wollen. Die folgende Version tut genau das gleiche wie die vorherigen, sondern verwendet eine separate Variable für die ausgewählte Seite:

http://jsbin.com/xequvone/12/edit

Ich denke, Sie einen Router wollen würden, wenn Ihr URL-Schema komplexer ist. Wenn der Hash beispielsweise mehrere Ebenen und Parameter enthält, z. B. #people, #/people/search oder #/people/edit/12343.

Answer 2

Etwas fehlt mir bei der Überprüfung Ihres Beispiels ist, wie Sie Routing handhaben. Wenn ein Benutzer an einer typischen Site zu example.com/foo oder example.com/#foo navigiert, würde meine Erwartung (unter Verwendung Ihres aktuellen Setups) dazu führen, dass Sie zur entsprechenden core-animated-pages Seite mit der ID foo oder einem Abschnitt gelangen, der dieser Route entspricht.

Mit Routing (möglicherweise das Polymer flatiron-director Element), eine grundlegende Lösung möglicherweise das DOM in Ihrem Element abfragen, ob ein Abschnitt der ID notsupportedURL gefunden werden kann. Ist dies nicht der Fall, wird der Benutzer standardmäßig auf die Seite core-animated-pages 404 geleitet, die nicht komplexer sein muss als Ihre jetzige Version.