tips for using backbone routers with pushstate

1.html

<a href="#foo">Say "foo"</a><br/>
<a href="#bar">Say "bar"</a><br/>
<div id="output"></div>

1.js

MyRouter = Backbone.Router.extend({
    routes: {
        "foo": "foo",
        "bar": "bar"
    },
    
    foo: function(){
        $("#output").append("foo!<br/>");
    },
    
    bar: function(){
        $("#output").append("bar!<br/>");
    }
});

new MyRouter();
Backbone.history.start();

2.html

<a href="/foo">Say "foo"</a><br/>
<a href="/bar">Say "bar"</a><br/>
<div id="output"></div>

2.js

MyRouter = Backbone.Router.extend({
    routes: {
        "foo": "foo",
        "bar": "bar"
    },
    
    foo: function(){
        $("#output").append("foo!<br/>");
    },
    
    bar: function(){
        $("#output").append("bar!<br/>");
    }
});

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

3.html

<a href="/foo" class="foo">Say "foo"</a><br/>
<a href="/bar" class="bar">Say "bar"</a><br/>
<div id="output"></div>

3.js

MyView = Backbone.View.extend({
  events: {
    "click a.foo": "foo",
    "click a.bar": "bar"
  },

  foo: function(e){
    e.preventDefault();
    history.navigate("foo");
    $("#output").append("foo");
  },

  bar: function(e){
    e.preventDefault();
    history.navigate("bar");
    $("#output").append("bar");
  }
});

new MyView({el: $("body")});

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