2013-02-13 23 views
23

Sto lavorando a una nuova app solo lato client con l'ultima versione di Ember.js. C'è una singola pagina PHP che costruisce script, css, file template, ecc. E fornisce tutto in index.php. Sto usando una direttiva htaccess in modo che tutte le richieste vengano riscritte in /index.php. Il PHP è lì solo per confezionare comodamente Javascript, per quanto mi riguarda.Applicazione JavaScript lato client - instradamento URL senza tag hash

Attualmente, i percorsi nel browser sono simili e funzionano correttamente.

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

Tuttavia, vorrei che a guardare come questo - che non funzionano bene.

Lo stesso identico codice client viene ancora consegnato con la seconda opzione, ma colpisce sempre il gestore di route dell'indice. Ho visto le app lato client troncare questo prima - cosa mi manca? Devo avere gestori di route corrispondenti sul lato PHP?

Modifica: Sto cercando una risposta specifica su come affrontarlo. Il web è pieno di informazioni "oh - lo fai e basta" che lascia tutti gli altri a grattarsi la testa.

risposta

48

In Ember.js (versione 1.0.0rc3) questo può essere realizzato utilizzando il Ember.js location API:

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

e quindi impostando il server Web per reindirizzare il traffico verso l'applicazione Ember.

Per fare un esempio concreto: ecco un semplice file di Apache .htaccess reindirizzare il traffico verso l'applicazione Ember situato in index.html:

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

Come Alex White punti su Apache 2.2.16 e soprattutto supporta una configurazione più semplice per reindirizzare il traffico verso un unico obiettivo:

FallbackResource /index.html 

la FallbackResource è parte del modulo mod_dir e richiede AllowOverride Indexes da impostare.

Assicurarsi di verificare accuratamente i percorsi dell'applicazione. Un errore comune è Uncaught SyntaxError: Unexpected token <, causato dall'utilizzo di collegamenti relativi a file CSS e JS. Prependoli con un segno / per renderli assoluti.

Questa funzionalità è not supported in Internet Explorer <10.

+3

omg - Ho cercato questa risposta per sempre ... – nbsp

+1

C'è un modo per farlo anche nel router Rails? – mehulkar

+0

Ciao! Così ho fatto questo, e ottenuto senza errori per 'localhost', ma gli aggiornamenti non funzionano ancora. Ho dovuto aggiungere una linea per consentire la comunicazione con la mia istanza 'couchdb': ' RewriteCond% {REQUEST_FILENAME}!^_ Couch (. *) $ ' Sto usando Chrome per i test, qualche idea? – blaineh

0

Sì, è necessario disporre di percorsi di corrispondenza sul lato server. Non usare il tag hash costringerà a ricaricare la pagina, rallentando le cose e probabilmente causando un aggiornamento maggiore di quello che dovrebbe essere necessario.

Inoltre è necessario passare lo stato tramite il server o utilizzare alcune varianti della memoria locale del browser.

1

@Pascal: Non sta parlando di aggiornamenti di pagina reali, ma piuttosto utilizzando di Ember history (location: 'history').

Per rispondere alla tua domanda, dovrai configurare il tuo .htaccess per pubblicare il contenuto come al solito in JavaScript. Una volta che gli URL sono configurati per caricare la tua applicazione, Ember si prenderà cura di tutto per te come al solito dall'URL.

+0

Puoi indicare un esempio di come configurare .htaccess per questo? –

8

Meglio di un RewriteRule, è possibile utilizzare questo per Apache 2.2.16+:

FallbackResource /index.html 

nella configurazione di Apache in modo che il RewriteRule non ha bisogno di correre per ogni richiesta. Questo assicurerà che ogni percorso della tua applicazione ember ricada sul file index.html.