I’m trying to keep a Backbone.js Collection up-to-date with what’s happening on the server.

My code is similar to the following:

var Comment = Backbone.Model.extend({});
var CommentCollection = Backbone.Collection.extend({
    model: Comment
});

var CommentView = Backbone.View.extend({ /* ... */ });
var CommentListView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'addOne', 'addAll');

        this.collection.bind('add', this.addOne);
        this.collection.bind('refresh', this.addAll);
    },
    addOne: function (item) {
        var view = new CommentView({model: item});
        $(this.el).append(view.render().el);
    },
    addAll: function () {
        this.collection.each(this.addOne);
    }
});

var comments = new CommentCollection;
setInterval(function () {
    comments.fetch();
}, 5000);

What happens is that when the comments are fetched, refresh is called, the same comments to the bottom of the CommentListView—which is what I’d expect from the code above.

What I’d like to know is what’s the best way to “refresh” the view, without loosing any “local state”.

Edit
Report