0

目標: Backbone を使用してユーザーのテーブルを生成し、それらのユーザーをインラインで編集できるようにし、保存時に更新されたデータで行を再レンダリングできるようにします。

  • メインのUsersViewを持つユーザー用のコンテナテーブルを生成しています。
  • 次に、ユーザー コレクションをループ処理し、UserView を使用してユーザーごとに 1 つのテーブル行を生成します。
  • 任意の行で編集をクリックすると、その行を編集フォームに置き換える必要があります。(テーブルに表示されているよりも多くのフィールドがユーザーに関連付けられています。)
  • [保存] をクリックすると、編集フォームが更新されたテーブル行に置き換えられます。

テーブル行の再レンダリングを除いて、すべてが機能します。（ページをリロードすると、更新されたユーザーデータが正しく表示されるので、保存されていることがわかります。）私がやろうとしていること（私が思うに）は、親ビュー（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 に答える