Backbone pushState i błąd 404

Question

próbuję wdrożyć { pushState : true } ale działa tylko na trasie podstawowej, a nie z innymi, które nadal dają mi błąd 404.

W Chrome Jeśli mam dostępu:

http://example.app/ - OK wyświetlany jest komunikat konsola

http://example.app/show - błąd 404 jest zwracany

Moja droga jest

var AppRouter = Backbone.Router.extend({ 

    routes: { 
     '': 'index', 
      'show': 'show' 
     }, 

     index: function() { 
      console.log('This is the index page'); 
     }, 
     show: function() { 
      console.log('This is the show page'); 
     } 

    }); 

    new AppRouter; 
    Backbone.history.start({pushState: true}); 

Moje .htaccess

<ifModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteBase/
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteCond %{REQUEST_URI} !index 
    RewriteRule (.*) index.html [L] 
</ifModule> 

Co mi brakuje albo robię źle?

Answer 1

Pamiętaj, że Backbone to framework po stronie klienta - jeśli używasz adresów URL opartych na ścieżkach do routingu (stan push), musisz się upewnić, że serwer zwraca poprawny znacznik dla tych adresów URL. Jest to podsumować w Backbone docs wygląda następująco:

Zauważ, że używając prawdziwych adresów wymaga serwer WWW, aby móc poprawnie renderowanie tych stron, więc back-end zmiany są niezbędne, jak również. Na przykład, jeśli masz trasę/documents/100, twój serwer internetowy musi być w stanie obsłużyć tę stronę, jeśli przeglądarka bezpośrednio odwiedza ten URL. Aby umożliwić pełne przeszukiwanie pod kątem wyszukiwarek, najlepiej, aby serwer wygenerował kompletny kod HTML strony ... ale jeśli jest to aplikacja internetowa, po prostu renderowanie tej samej treści, co w przypadku głównego adresu URL, i wypełnianie reszty za pomocą Trybu szkieletowego Widoki i JavaScript działają dobrze.

Innymi słowy, Backbone nie może pomóc, jeśli serwer nie rozumie example.app/show - trzeba naprawić serwer przy użyciu przepisać URL i/lub język po stronie serwera z wyboru.

Answer 2

Musisz utworzyć funkcję inicjalizacji dla tej sprawy.

Podłączyłem coś do routera Boilerplate, włącz to przed inicjalizacją routera na końcu skryptu.

var initialize = function() { 

    var app_router = new AppRouter; 

    Backbone.history.start({ pushState: false }); 

    $(document).on('click', 'a:not([data-bypass])', function(e){ 

     var href = $(this).prop('href'); 
     var root = location.protocol + '//' + location.host + '/'; 

     if (root === href.slice(0, root.length)){ 
      e.preventDefault(); 
      Backbone.history.navigate(href.slice(root.length), true); 
     } 
    }); 

}; 

Answer 3

Myślę, że po prostu brakuje "#" w adresie URL. Podążałem teraz za kilkoma tutorialami i właśnie zdałem sobie sprawę z tego, w jaki sposób powstrzymują one żądanie przed udaniem się na serwer.

Więc zamiast
http://example.app/show
mieć
http://example.app/#/show

i kręgosłup powinien być w stanie go dogonić.