Question

I am trying to use the backbone architecture in my MVC application. I created the templates using HandleBars/Mustache and my model contains information that I display in a table on the UI (within a div).

I would like to reload the page after every 5 mins to refresh the data in the table.
I can use
<meta http-equiv="refresh" content="some value" />,

but it won’t hold the view data in the table. How can I refresh the page in this scenario?

EDIT:
Basically, on the page I have a search box and the search items are loaded on a table. If I refresh the page using the meta tag, the page is reloaded and the data in the table is gone.

Answer 1

I would like to reload the page after every 5 mins to refresh the data in the table.

Not quite. You want to reload the data every five minutes so that you can refresh the table in the page.

You should use setTimeout somewhere, perhaps even in your view’s initialize:

start_reloader: function() {
    var _this = this;
    this.timer = setTimeout(function() {
        $.ajax({
            // Load the data from your server...
            success: function(data) {
                _this.redraw_the_table(data);
                _this.start_reloader();
            }
        });
    }, 5*60*1000);
},

initialize: function() {
    this.start_reloader();
}

And then you’d want something in your remove to kill the timer:

remove: function() {
    if(this.timer)
        clearTimeout(this.timer);
    return Backbone.View.prototype.remove.apply(this);
}

You could also use setInterval and clearInterval but there is a (small) chance that they can pile up on each other if there are delays in the AJAX calls.

You don’t have to manage this in the view of course. Setting up a model or collection to reload itself from the server every five minutes might make more sense in your case; then, your view would bind to the model’s or collection’s events as usual and redraw the table in response to 'reset', 'change', … events from the model/collection.