在backbone.js 中更新父视图

Question

目标：使用 Backbone 生成用户表，能够在线编辑这些用户，并在保存时使用更新的数据重新渲染行。

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

除了重新渲染表格行外，一切正常。 （如果我重新加载页面，更新的用户数据会正确显示，所以我知道它正在保存。）我想要做的（我认为）是让父视图（UsersView）监听更改并重新渲染用户视图。经过数十次搜索和不同的尝试，我在这里寻求帮助，了解我做错了什么。提前致谢。

//主要用户视图

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

Answer 1

当集合的项目发生任何更改时，不会触发 change 事件。

所以你的下面一行不应该做任何事情：

this.listenTo( Users, 'change', this.updateOne );

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

this.listenTo( this.model, 'change', this.render );

所以现在每当模型改变（编辑时），当前用户行会再次呈现。