Backbone collection change event fires, but nothing changes in the view

Question

I am running the following view:

app.OrganisationTab = Backbone.View.extend({

el : "#organisations",

template : _.template( $("#tpl-groups-list").html() ),

events : {
    "click .js-edit-group" : "editGroup"
},

initialize: function() {

    this.listenTo(this.collection, 'change', this.change);

    var that = this;



    this.collection.fetch({
        success: function() {
            that.render();
        }
    })
},

change: function() {
    //this.$el.empty();
    console.log("collection has changed");
},

render:function() {
    this.$el.empty();
    this.addAll();
    return this;
},

addAll: function() {

    this.collection.each(this.addOne, this);

},

addOne: function(model) {

    var view = new app.GroupEntry({ 
        model: model 
    });

    this.$el.append(view.render().el);

},

editGroup: function(e) {

    e.preventDefault();
    var elm = $(e.currentTarget),
        that = this;

    $('#myModal').on('hidden.bs.modal', function () {
        $('.modal-body').remove();
    });

    var organisation = this.collection.findWhere({ id : String(elm.data('groupid')) });

    var members = organisation.get('users');
    organisation.set('members', new app.UserCollection(members));

    var projects = organisation.get('projects');
    organisation.set('projects', new ProjectCollection(projects));

    var orgForm = new app.createOrganisationForm({
        model : organisation,
    });

    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false
    }); 

}

});

This view triggers a new view, and in that I can change a model save it (sends a PUT) and I can get in my console, collection has changed. If I console.log this collection I can see that the collection has changed. If I try and re-render the page all I see are the models as they were without the edits.

Why would this be happening, when clearly the collection is getting changes as it fires the events and I can see it when I log the collection?

Answer 1

After reading your comment:

No sorry on collection change I try to run render() which should empty the container, and add all the models...but it seems to render the old collection again.

You're getting this problem because you are overriding the success handler for the fetch call. That success callback is triggered before the models are placed in the collection. You need to listen to the sync event if you want render after the collection has been synchronized with the server (models are updated after fetch).

Update initialize to:

initialize: function() {
    this.listenTo(this.collection, 'change', this.change);
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
},