Question

我正在运行以下视图：

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这个集合，我可以看到集合已经改变了。如果我尝试重新渲染页面，我看到的只是没有编辑的模型。

为什么会发生这种情况，显然集合在触发事件时会发生变化，我可以在记录集合时看到它？

Answer 1

阅读评论后：

对于集合更改没有抱歉我尝试运行应该为空的render（）容器，并添加所有模型......但似乎渲染旧再次收集。

您正在解决此问题，因为您正在覆盖success电话的fetch处理程序。在将模型放入集合之前触发成功回调。如果您希望在集合 sync 与服务器同步后进行渲染，则需要监听sync event（模型在获取后更新）。

更新初始化为：

initialize: function() {
    this.listenTo(this.collection, 'change', this.change);
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
},

激活骨干集合更改事件，但视图中没有任何更改

1 个答案: