Backbone Router navigieren und verankern href

Question

In einer Backbone-fähigen App habe ich Code gesehen, der weiterhin <a href="#foo"></a> verwendet, während der Ankerklick von einem Backbone-Event-Handler gehandhabt wird.

Alternativ kann die Navigation zu #foo durch behandelt werden:

Router.history.navigate("foo"); 

ich glaube, das letzteres der bessere Ansatz ist, weil es eine einfache Migration zu und von HTML5 der pushstate-Funktionalität ermöglicht. Und wenn wir pushState verwenden, wäre Backbone in der Lage, für Browser, die pushState nicht unterstützen, zu # foo zu degradieren.

Da ich noch neu bei Backbone bin, kann jemand erfahrener und sachkundiger bestätigen, dass dies der Fall ist?

Answer 1

Ich persönlich habe pushState aktiviert und den Ansatz in Tim Branyen Backbone-vorformulierten von adding a click handler genommen verwenden, die alle Klicks auf Links zu navigate sendet, wenn sie ein data-bypass Attribut:

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

Diese funktioniert ziemlich gut und als @nickf erwähnt hat den Vorteil, dass Sie nicht den Hash/Hashbang Hack verwenden müssen, auch für Browser, die pushState nicht unterstützen.

Answer 2

Ja, ich versuche, so viel Router.history.navigate wie ich kann in meinen Backbone-Apps zu verwenden. Dies hat auch den Vorteil, dass wenn der Benutzer die URL "/ foo" in seinem Browser eintippt, Backbone es richtig routet. Offensichtlich, wenn es sich um einen externen Link oder etwas handelt, das Sie nicht mit Backbone behandeln möchten, sollten Sie es nicht hinzufügen.

Answer 3

Sie sollten Ihre Links als "richtige" Adressen schreiben, das heißt, nicht mit dem Hash, der nur ein Hack ist, um einige Mängel eines bestimmten Browsers zu umgehen. Um dann alles in Ordnung zu bringen, hängen Sie einen Klick-Handler an, um Klicks auf diese Elemente zu erfassen, und leiten Sie die URLs an Backbone.history weiter, die dann pushState verwenden oder bei Bedarf zu einer Hashbang-URL konvertieren können. Zum Beispiel:

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

Chris Antwort ist genial, aber es gibt eine Ergänzung, die es noch besser macht. Backbone.history.navigate() gibt tatsächlich wahr oder falsch zurück und sagt uns, ob es intern weitergeleitet werden könnte. Wir können daher die data-bypass Attribut überspringen und gehen Sie wie folgt statt:

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