Router szkieletowy nawigacja i zakotwiczanie href

Question

W aplikacji z obsługą szkieletu widziałem kod, który nadal korzysta z <a href="#foo"></a>, podczas gdy kliknięcie kotwicy jest obsługiwane przez moduł obsługi zdarzeń szkieletu.

Alternatywnie, nawigacja do #foo mogą być obsługiwane przez:

Router.history.navigate("foo"); 

Wierzę, że ten ostatni jest lepszy podejście, ponieważ umożliwia łatwą migrację do iz funkcjonalnością pushState HTML5 jest. A jeśli użyjemy funkcji pushState, Backbone będzie w stanie z wdziękiem zniszczyć #foo w przeglądarkach, które nie obsługują pushState.

Jako że wciąż jestem nowy w kręgosłupie, czy ktoś bardziej doświadczony i dobrze poinformowany może to potwierdzić?

Answer 1

ja osobiście mam pushState włączona i wykorzystywać podejście przyjęte w Tim Branyen Kręgosłup-boilerplate z adding a click handler który wysyła wszystkie kliknięcia linku do navigate chyba mają data-bypass atrybut:

$(document).on("click", "a:not([data-bypass])", function(evt) { 
    var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
    var root = location.protocol + "//" + location.host + Backbone.history.options.root; 

    if (href.prop && href.prop.slice(0, root.length) === root) { 
    evt.preventDefault(); 
    Backbone.history.navigate(href.attr, true); 
    } 
}); 

ten działa całkiem nieźle i jak wspomina @nickf ma tę zaletę, że nie musisz używać hash/hashbang, nawet w przeglądarkach, które nie obsługują pushState.

Answer 2

Tak Staram się używać jak najwięcej Router.history.navigate, jak mogę w moich aplikacjach szkieletowych. Ma to również tę zaletę, jeśli użytkownik wpisze w adresie URL "/ foo" w swojej przeglądarce, Backbone prowadzi właściwą trasę. Oczywiście, jeśli jest to zewnętrzne łącze lub coś, czego nie chcesz obsługiwać w Backbone, nie powinieneś go uwzględniać.

Answer 3

Powinieneś napisać swoje linki jako swoje "właściwe" adresy, to znaczy nie za pomocą skrótu, który jest po prostu hackem, aby ominąć niektóre braki danej przeglądarki. Aby to wszystko zadziałało, należy załączyć moduł obsługi kliknięć, aby przechwycić kliknięcia tych elementów i przekazać adresy URL do usługi Backbone.history, która może następnie użyć parametru pushState lub przekonwertować adres URL hashbang'd, jeśli jest to konieczne. Na przykład:

$(document).on('click', 'a[href^="/"]', function (event) { 
    // here, ensure that it was a left-mouse-button click. middle click should be 
    // allowed to pass through 
    event.preventDefault(); 
    Backbone.history.navigate(this.href); 
}); 

Answer 4

Odpowiedź Chris jest niesamowita, ale jest jeszcze jeden dodatek, który sprawia, że ​​jest jeszcze lepsza. Backbone.history.navigate() faktycznie zwraca wartość true lub false, informując nas, czy może skierować do niej wewnętrznie. Możemy zatem pominąć atrybut data-bypass i wykonaj następujące zamiast:

$(document).on("click", "a", function(evt) { 
    var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
    var root = location.protocol + "//" + location.host + Backbone.history.options.root; 

    if (href.prop && href.prop.slice(0, root.length) === root) { 
    if (Backbone.history.navigate(href.attr, true)) { 
     evt.preventDefault(); 
    } 
    } 
});