Backbone View injected links reload Site

Question

After rendering a Backbone View I inject HTML generated with jQuery. This HTML also includes links within the application. If you click those links they reload the site.

How can I bind those links so they will trigger the router and don't reload the site?

Answer 1

You have to bind a click event to those links and call Router.navigate. It's important that you return false from your event handler as this will prevent the borwser to actually follow the link. Another important thing is to pass trigger: true to actually have your router execute (otherwise it will only change the url displayed in the address bar).

events : {
    'click a.changeView' : 'changeView'
},

changeView : function(e) {
    Router.navigate(e.target.href, { trigger: true });
    return false;
}

Also, you might have to tweak your href a bit if it contains protocol, domain, etc... for instance if your href is http://mydomain.com/mypage you might need to pass only mypage to the router.