0

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

  • 我正在为具有主用户视图的用户生成一个容器表。
  • 然后，我遍历用户集合，并使用 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;
  }
});
4

1 回答 1

0

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

因此，您的以下行不应该真正做任何事情：

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

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

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

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

于 2013-03-21T10:46:55.520 回答