在backbone.js中更新父视图

Question

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

• 我使用主UsersView为用户生成容器表。
• 然后我循环遍历用户集合，并使用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);

所以现在每当模型（在编辑时），当前用户行再次被渲染。