更新backbone.js中的父视图

目标：使用主干生成用户表，能够内联编辑这些用户，并在保存时使用更新的数据重新呈现行

• 我正在为具有主UsersView的用户生成一个容器表
• 然后，我循环遍历一个users集合，并使用UserView为每个用户生成一个表行
• 单击任何行上的“编辑”需要将该行替换为编辑表单。（与用户关联的字段多于表中显示的字段。）
• 单击“保存”将用更新的表行替换编辑表单

除了重新呈现表行外，所有操作都正常。（如果我重新加载页面，更新的用户数据将正确显示，因此我知道它正在保存。）我尝试（我认为）让父视图（UsersView）侦听更改并重新呈现UserView。经过几十次搜索和不同的尝试，我在这里寻求帮助，我做错了什么。提前谢谢

//主要用户视图

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 );
  }
});

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( );
  }
});

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 } );
  }
});

//个人用户视图

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 );
  }
});

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( );
  }
});

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 } );
  }
});

//用户编辑视图

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 );
  }
});

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( );
  }
});

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 } );
  }
});

//用户模型

var UserModel = Backbone.Model.extend( {
  idAttribute: 'key_email_address'
});

//用户集合

var UsersCollection = Backbone.Collection.extend( {
  model: User,

  url: 'users',

  initialize : function( models, options ) { },

  parse: function( data ) {
    this.result = data.result;
    return data.users;
  }
});

---

当集合的项发生任何更改时，不会触发

change

事件

因此，您的以下行实际上不应该做任何事情：

this.listenTo（用户，'change'，this.updateOne）

您需要在
UserView
initialize
方法中包括以下内容：

this.listenTo（this.model，'change'，this.render）

因此，无论何时更改模型（编辑时），都会再次渲染当前用户行
 这不是一个完整的解决方案，但它为我指明了正确的方向。除了模型上的listenTo事件外，我还必须在saveUsers函数中使用this.model.save而不是Users.create。谢谢你的帮助
create
方法更像是指向“新建+外接程序”集合的快捷方式。如果您正在编辑现有模型。。您应该使用
save