Router backbone navegar y anclar href

Question

En una aplicación habilitada para backbone, he visto código que sigue usando <a href="#foo"></a>, mientras que el clic de anclaje es manejado por un controlador de eventos de red troncal.

alternativa, la navegación a #foo puede ser manejado por:

Router.history.navigate("foo"); 

Creo que éste es el enfoque superior, ya que permite una fácil migración desde y hacia la funcionalidad pushState de HTML5. Y si usamos pushState, Backbone podría degradarse con gracia a #foo para los navegadores que no son compatibles con pushState.

Como soy nuevo en Backbone, ¿alguien más experimentado y experto puede confirmar que este es el caso?

Answer 1

Yo personalmente tengo pushState habilitado y usar el enfoque adoptado en la columna vertebral-repetitivo de adding a click handler de Tim Branyen que envía todos los clics de enlace a navigate a menos que tengan un atributo data-bypass:

$(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); 
    } 
}); 

Este funciona bastante bien y como @nickf menciona tiene la ventaja de que no tiene que usar el truco hash/hashbang, incluso para navegadores que no son compatibles con pushState.

Answer 2

Sí, intento utilizar tanto Router.history.navigate como pueda en mis aplicaciones Backbone. Esto también tiene la ventaja de que si el usuario ingresa la URL "/ foo" en su navegador, el Backbone lo enrutará correctamente. Obviamente, si se trata de un enlace externo o algo que no desea manejar con Backbone, entonces no debería incluirlo.

Answer 3

Debe escribir sus enlaces como sus direcciones "correctas", es decir, no con el hash, que es solo un truco para sortear algunas deficiencias de un navegador en particular. Para que todo funcione, adjunte un controlador de clic para captar clics en estos elementos y pase las URL a Backbone.history, que luego puede usar pushState o convertir a una URL hashbang'd si es necesario. Por ejemplo:

$(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

La respuesta de Chris es increíble, pero hay una adición que lo hace aún mejor. Backbone.history.navigate() realmente devuelve verdadero o falso diciéndonos si podría encaminarse a él internamente. Por tanto, podemos omitir el atributo data-bypass y hacer lo siguiente en su lugar:

$(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(); 
    } 
    } 
});