javascript - Backbone.js refresh view with a timer? - Stack Overflow

I have a collection populated from a URL:

var PeopleCollection = Backbone.Collection.extend({
model: Person,
url: '/hr/xml-home-3a.php'
});

Which uses the following view:

var PeopleView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.collection = new PeopleCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.fetch();
    },
    render: function () {
        this.collection.each(function (person) {
            var personView = new PersonView({
                model: person
            });
            this.$el.append(personView.render().el);
        }, this);
        return this;
    }
});

My question is that I'd like this view to refresh every 5 seconds, get a fresh feed and redisplay with this fresh feed.

I can, of course, reload the page itself with JS but I was wondering if it could be done inside of Backbone.

I have a collection populated from a URL:

var PeopleCollection = Backbone.Collection.extend({
model: Person,
url: '/hr/xml-home-3a.php'
});

Which uses the following view:

var PeopleView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.collection = new PeopleCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.fetch();
    },
    render: function () {
        this.collection.each(function (person) {
            var personView = new PersonView({
                model: person
            });
            this.$el.append(personView.render().el);
        }, this);
        return this;
    }
});

My question is that I'd like this view to refresh every 5 seconds, get a fresh feed and redisplay with this fresh feed.

I can, of course, reload the page itself with JS but I was wondering if it could be done inside of Backbone.

• javascript
• jquery
• ajax
• backbone.js

Share Improve this question Follow edited Jun 13, 2013 at 19:15 Adil Shaikh 44.8k1717 gold badges9595 silver badges112112 bronze badges asked Jun 13, 2013 at 19:13 SteveSteve 14.9k3939 gold badges139139 silver badges245245 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can try the following solution. There could be other workaround also but I have tried the following method. This will re-render the child views and keep there instances in an array. When it refreshes after each 5 seconds, it will close the previous child views and re-render them with new fetch data.

var PeopleView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.collection = new PeopleCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.fetch();
    },
    render: function () {
        var self = this;
        this.childViews = [];
        this.collection.each(function (person) {
            var personView = new PersonView({
                model: person
            });
            this.childViews.push(personView);
            this.$el.append(personView.render().el);
        }, this);

        setTimeout(function(){
            self.reRender();
        }, 5000);

        return this;
    },
    reRender : function(){
        var self = this;
        this.collection.fetch({
            success : function(){
                _.each(self.childViews, function(view){
                    view.remove();
                    view.unbind();
                });

                self.childViews= [];
                self.render();
            }
        });        
    }
});

I'd go with event driven solution. For example after refreshing feed, Your collection should trigger an event and that event should be handled by the view (handled for ex. it should invoke the 'render' method).

Also, the view shouldn't refresh the collection, it should work in the exactly opposite way (the collection should refresh the view).

Using setTimeout to do a new collection fetch is ok.

However, unless you're certain that all models in the collection are changed on refresh, re-rendering all person views is not an optimal solution.

A better approach is to bind each person view's render method to changes (change, add, remove events) in its corresponding collection model.

If you're using Backbone 1.0, fetch performs an update and triggers add, remove and change events by default. If you're < 1.0 you would use fetch({update:true}) to achieve this.