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 could also just make a meaningless change to the url by adding a random number to the end:

var url = $(this).attr('href') + '?rand=' + Math.floor(Math.random() * 1000);
Backbone.history.navigate(url, true);

This is especially useful for IE since it will not request new data via an AJAX call if the url has not changed.

Answer 2

You can often modify your route to include a splat, so that you can append a random string to the end of an href to make it unique, but still match the "home" route. (Note: make this your last route.)

In the routes:

routes: {
    "*str": "home"
}

In the view:

render: function() {
    var data = {href: +(new Date())};
    _.extend(data, this.model.attributes);
    this.$el.html(this.template(data));
    return this;
}

In the template (handlebars shown here):

<a href="{{href}}">Home Link</a>

Answer 3

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 4

It works with

 myBackboneRouter.navigate("users", {trigger: true})

Answer 5

You can easily refresh the page using below approach:

@win_loc = window.location.toString().replace("#","")
Backbone.history.redirectTo(@win_loc)

Answer 6

In order to provide a reusable snippet of code I augmented the Backbone.View with a helper method to reuse it wherever we need to reload the same page despite the Backbone router limitations.

In our app.js file or any other proper place

Backbone.View = Backbone.View.extend({
    refreshPage: function(e){
        if(e.target.pathname){
            Backbone.history.navigate(e.target.pathname);
        }
        window.location.reload();           
    }
});

This way if we have a link such as

<a href="/whatever" id="whateverId">Some text </a>

In our View we would just need to bind the click event to that callback to leverage the refresh page feature, as far as the refreshPage helper will be available through the prototype chain

events: {
    'click #whateverId': 'refreshPage', 
}

As far as we don't need to change the "a tag" it's a cleaner solution that will save some boilerplate coding

Hope it helps