Backbone Router navigate and anchor href

Question

In a backbone-enabled app, I have seen code that continues to use <a href="#foo"></a>, while the anchor click is handled by a backbone event handler.

Alternatively, the navigation to #foo can be handled by:

Router.history.navigate("foo");

I believe the latter is the superior approach because it allows easy migration to and from HTML5's pushState functionality. And if we do use pushState, Backbone would be able to gracefully degrade to #foo for browsers that do not support pushState.

As I am still new to Backbone, can someone more experienced and knowledgable confirm that this is the case?

Answer 1

I personally have pushState enabled and use the approach taken in Tim Branyen's backbone-boilerplate of adding a click handler that sends all link clicks to navigate unless they have a data-bypass attribute:

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

This works pretty well and as @nickf mentions has the advantage that you don't have to use the hash/hashbang hack, even for browsers that do not support pushState.