Обновление родительского представления в backbone.js

Question

Цель: использовать базовую основу для создания таблицы пользователей, иметь возможность редактировать этих пользователей в строке и сохранять, повторно отображать строку с обновленными данными.

• Я создаю таблицу контейнеров для пользователей с основным UserView.
• Затем я просматриваю коллекцию пользователей и используя 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 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);

вам необходимо включить его в вашем UserViewinitialize метод:

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

так что теперь каждый раз, когда модель (при редактировании), текущая строка пользователя снова отображается.