启动主干集合更改事件，但视图中没有任何更改

Backbone collection change event fires, but nothing changes in the view

本文关键字：视图 任何更 事件 集合 启动      更新时间：2023-09-26

我正在运行以下视图：

app.OrganisationTab = Backbone.View.extend({
el : "#organisations",
template : _.template( $("#tpl-groups-list").html() ),
events : {
    "click .js-edit-group" : "editGroup"
},
initialize: function() {
    this.listenTo(this.collection, 'change', this.change);
    var that = this;

    this.collection.fetch({
        success: function() {
            that.render();
        }
    })
},
change: function() {
    //this.$el.empty();
    console.log("collection has changed");
},
render:function() {
    this.$el.empty();
    this.addAll();
    return this;
},
addAll: function() {
    this.collection.each(this.addOne, this);
},
addOne: function(model) {
    var view = new app.GroupEntry({ 
        model: model 
    });
    this.$el.append(view.render().el);
},
editGroup: function(e) {
    e.preventDefault();
    var elm = $(e.currentTarget),
        that = this;
    $('#myModal').on('hidden.bs.modal', function () {
        $('.modal-body').remove();
    });
    var organisation = this.collection.findWhere({ id : String(elm.data('groupid')) });
    var members = organisation.get('users');
    organisation.set('members', new app.UserCollection(members));
    var projects = organisation.get('projects');
    organisation.set('projects', new ProjectCollection(projects));
    var orgForm = new app.createOrganisationForm({
        model : organisation,
    });
    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false
    }); 
}
});

这个视图触发了一个新的视图，这样我就可以更改模型并保存它（发送PUT），然后我就可以进入控制台collection has changed。如果我console.log这个集合，我可以看到集合已经更改。如果我尝试重新渲染页面，我看到的只是没有编辑的模型。

为什么会发生这种情况，当集合在触发事件时明显发生了更改，并且我在记录集合时可以看到它？

阅读您的评论后：

不抱歉集合更改，我尝试运行render（），它应该为空容器，并添加所有模型。。。但它似乎使旧再次收集。

出现此问题是因为您正在重写fetch调用的success处理程序。成功回调是在模型被放入集合之前触发的。如果要在集合与服务器同步后进行渲染，则需要侦听同步事件（模型在获取后更新）。

更新初始化为：

initialize: function() {
    this.listenTo(this.collection, 'change', this.change);
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
},
相关文章：