Updating parent view in backbone.js - backbone.js

Question

The goal: Use Backbone to generate a table of users, be able to edit those users inline, and on save, re-render the row with the updated data.
I'm generating a container table for users with a main UsersView.
I'm then looping through a users collection, and using a UserView to generate one table row per user.
Clicking edit on any row needs to replace the row with an edit form. (There are more fields associated with a user than are displayed in the table.)
Clicking Save should replace the edit form with the updated table row.
Everything works except the re-render of the table row. (If I reload the page, the updated user data is displayed correctly, so I know it's saving.) What I'm trying to do (I think) is get the parent view (UsersView) to listen to the change and re-render the UserView. After dozens of searches and different attempts, I'm here asking for help as to what I'm doing wrong. Thanks in advance.
// Main users view
var UsersView = Backbone.View.extend( {
el: '#content',
template: _.template( usersTemplate ),
initialize: function( ) {
var that = this;
this.listenTo( Users, 'change', this.updateOne );
Users.fetch( );
that.render( );
},
render: function( ) {
this.$el.html( this.template );
},
// Add a single user to the table
addOne: function( user ) {
var userView = new UserView( { model: user } );
userView.render( ).el;
},
// Add all items in the Users collection
addAll: function( ) {
Users.each( this.addOne, this );
}
});
// Individual user view
var UserView = Backbone.View.extend({
el: '#usersTableBody',
tagName: 'tr',
attributes : function( ) {
return {
'data-user' : this.model.get( 'display_name' )
};
},
template: _.template( userTemplate ),
events: {
'click .editUser': 'editUser'
},
initialize: function( ){ },
render: function( ) {
var html = this.template( this.model.attributes );
this.$el.html( html );
},
// Switch user row into edit mode
editUser: function( e ) {
e.preventDefault( );
var userAddEditView = new UserAddEditView( { model: this.model } );
userAddEditView.render( );
}
});
// User edit view
var UserAddEditView = Backbone.View.extend({
el: $( '#content' ),
template: _.template( userEditTemplate ),
events: {
'click .saveUser': 'saveUser'
},
initialize: function( options ) { },
render: function( ) {
element = '[data-user="' + this.model.get( 'display_name' ) + '"]'
this.$el.find( element ).hide( ).after( this.template( this.model.attributes ) );
},
saveUser: function( ) {
var display_name = this.$( '#display_name' ).val( ).trim( );
var email_address = this.$( '#email_address' ).val( ).trim( );
var key_email_address = this.$( '#key_email_address' ).val( ).trim( );
var password = this.$( '#password' ).val( ).trim( );
var partner_name = this.$( '#partner_name' ).val( ).trim( );
var hash = this.$( '#hash' ).val( ).trim( );
var salt = this.$( '#salt' ).val( ).trim( );
Users.create( { display_name: display_name, key_email_address: key_email_address, email_address: email_address, password: password, partner_name: partner_name, hash: hash, salt: salt } );
}
});
// User model
var UserModel = Backbone.Model.extend( {
idAttribute: 'key_email_address'
});
// Users collection
var UsersCollection = Backbone.Collection.extend( {
model: User,
url: 'users',
initialize : function( models, options ) { },
parse: function( data ) {
this.result = data.result;
return data.users;
}
});

Answer 1

There is no change event fired when any changes occur on the items of a collection.
So your following line shouldn't really do anything:
this.listenTo( Users, 'change', this.updateOne );
you need to include the following in your UserView initialize method:
this.listenTo( this.model, 'change', this.render );
so now whenever the model is changed (on editing), the current user row is rendered again.