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 \'

Answer 1

You can easily refresh the page using below approach:

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

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

The difference between http://localhost.com/ and http://localhost.com/#!/ is that the second is a link to anchor, it does not load a page, it only looks for the anchor in the current page, and scrolls to it if found. You need to make your link looks like the first one, no "#" close to end.

Answer 4

Here's my favorite approach so far:

 if (!Backbone.history.navigate(urlPath, true)) {
      Backbone.history.loadUrl();
 }

Answer 5

The backbone.history.loadUrl is the solution.

The click handling function of your Home button (if the home is the root / of your WebApp) should be:

myAppRouter.navigate('');
Backbone.history.loadUrl();

Answer 6

I needed to 'refresh' my page on orientation change event because not all of my css media queries for portrait mode where executed correctly by default. This is what I ended up doing:

Backbone.history.fragment = null;
Backbone.history.navigate(document.location.hash, true); 

Of course, for the completeness of this answer, this was wrapped in some orientation change handling code:

window.addEventListener('orientationchange', function () {
    Backbone.history.fragment = null;
    Backbone.history.navigate(document.location.hash, true); 
}, false);