Clientseitige JavaScript-App - URL-Routing ohne Hash-Tag

Question

Ich arbeite an einer neuen clientseitigen App mit der neuesten Version von Ember.js. Es gibt eine einzige PHP-Seite, die Skripte, CSS, Template-Dateien usw. erstellt und alles in die index.php liefert. Ich benutze eine htaccess-Direktive, so dass alle Anfragen in /index.php umgeschrieben werden. Das PHP ist nur dazu da, das Javascript, soweit es mich betrifft, bequem zu packen.

Aktuell sehen die Routen im Browser so aus und funktionieren gut.

/#/about 
/#/favorites 
/#/etc 
/#/posts/5/edit 

Allerdings möchte ich, dass sie so aussehen - die funktionieren nicht gut.

Der exakt gleiche Client-Code wird immer noch mit der zweiten Option geliefert - aber er trifft immer den Index-Route-Handler. Ich habe schon Anwendungen auf der Client-Seite gesehen, die ich bisher vermisst habe. Muss ich auf der PHP-Seite passende Route-Handler haben?

Edit: Ich bin auf der Suche nach einer spezifischen Antwort, wie man das angehen. Das Web ist voll von "Oh - du tust das einfach" Information, die alle anderen am Kopf kratzen lässt.

Answer 1

In Ember.js (Version 1.0.0rc3) dies mit den Ember.js location API erreicht werden kann:

App.Router.reopen({ 
    location: 'history' 
}); 

Und dann Setzen des Web-Server-Verkehr auf die Ember Anwendung zu umleiten.

Um ein konkretes Beispiel zu nennen ist hier eine grundlegende Apache .htaccess Datei Traffic auf die Anwendung in index.html befindet Ember Umleitung:

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^(.*)$ /index.html#$1 [L] 

Als Alex White weist darauf hin, Apache 2.2.16 und höher unterstützt eine einfachere Konfiguration für Verkehr zu einem einzelnen Ziel Umleiten:

FallbackResource /index.html 

die FallbackResource ist Teil des Moduls mod_dir und erfordert AllowOverride Indexes eingestellt werden.

Stellen Sie sicher, dass die Anwendungsrouten gründlich getestet werden. Ein häufiger Fehler ist Uncaught SyntaxError: Unexpected token <, der durch die Verwendung relativer Links zu CSS- und JS-Dateien verursacht wird. Voranstellen sie mit einer / Markierung, um sie absolut zu machen.

Diese Funktionalität ist not supported in Internet Explorer <10.

Answer 2

Ja, Sie müssten auf der Serverseite übereinstimmende Routen haben. Wenn Sie das Hash-Tag nicht verwenden, wird auch ein erneutes Laden der Seite erzwungen, wodurch die Vorgänge verlangsamt werden und wahrscheinlich mehr Aktualisierungen erforderlich werden, als erforderlich sind.

Außerdem müssen Sie den Status über den Server übergeben oder eine Variante des lokalen Speichers des Browsers verwenden.

Answer 3

@Pascal: Er spricht nicht über die aktuelle Seite aktualisiert, sondern mit Embers history (location: 'history').

Um Ihre Frage zu beantworten, müssen Sie Ihre .htaccess konfigurieren, um den Inhalt wie gewohnt für das JavaScript bereitzustellen. Sobald Ihre URLs so konfiguriert sind, dass sie Ihre Anwendung laden, kümmert sich Ember wie gewohnt um alles.

Answer 4

Besser als ein RewriteRule, können Sie dies für Apache 2.2.16+ verwenden:

FallbackResource /index.html 

in der Apache-Konfiguration, so dass die RewriteRule nicht für jede Anforderung laufen muss. Dadurch wird sichergestellt, dass jede Route in Ihrer Ember-Anwendung in die index.html-Datei fällt.