How to refresh a page in a backbone application

Question

I am using backbone to build my web app.

Currently I am facing an issue whereby if I am on the home page, I am unable to refresh the same page by just clicking on the 'home' button again.

I believe that this is the limitation provided by backbone (does not reload the page if the same URL is called)

Is there any way around this? So that I can trigger a page reload when I click on the home button again i.e. call the same URL again?

Answer 1

You're looking for Backbone.history.loadUrl. From the Annotated Source:

Attempt to load the current URL fragment. If a route succeeds with a match, returns true. If no defined routes matches the fragment, returns false.

So, for a simple refresh link, you can add the following event to your Backbone.View:

events: {   'click a#refresh': function() {     Backbone.history.loadUrl();     return false;   } } 

Answer 2

Looking at the backbone.js source, it seems as though this is not possible by default, since it only responds to a url change. And since clicking the same link, you would not trigger a change event.

Code in Backbone.History:

$(window).bind('hashchange', this.checkUrl); 

You'll need to handle a non-change yourself. Here's what I did:

$('.nav-links').click(function(e) {     var newFragment = Backbone.history.getFragment($(this).attr('href'));     if (Backbone.history.fragment == newFragment) {         // need to null out Backbone.history.fragement because          // navigate method will ignore when it is the same as newFragment         Backbone.history.fragment = null;         Backbone.history.navigate(newFragment, true);     } });