javascript - 从集合中移除绑定(bind)以从 View 中移除

Question

我有一个 Backbone 集合，当我从集合中删除一个模型时，我希望它从 View 的列表中删除该项目。

我的收藏很简单

MyApp.Collections.CurrentEvents = Backbone.Collection.extend({    model: MyApp.Models.Event});

在我看来我有

MyApp.Views.CurrentEventItem = Backbone.View.extend({   el: 'div.current_event',   initialize: function(){        event = this.model;        _.bindAll(this, "remove");        MyApp.CurrentEvents.bind('remove',this.remove); //the collection holding events     this.render();  },   // yeah, yeah, render stuff here remove: function(){    console.log(this);    $(this.el).unbind();    $(this.el).remove();  }});

当我从集合中删除模型时，它会触发删除功能，但 View 仍在页面上。在控制台中，我可以看到模型，但我相信模型应该有一个“el”，但它没有。

我的容器代码是

MyApp.Views.CurrentEventsHolder = Backbone.View.extend({    el: 'div#currentHolder',    initialize: function(){           MyApp.CurrentEvents = new MyApp.Collections.CurrentEvents();           MyApp.CurrentEvents.bind('new', this.add);   },   add: function(){          var add_event = new MyApp.Views.CurrentEventItem(added_event);        $('div#currentHolder').append(add_event.el);     }});

出于某种原因，在 add 方法中，我似乎无法在追加之前使用 $(this.el)，但我不确定是否是问题所在。

Answer 1

问题: MyApp.CurrentEvents.bind('remove',this.remove);

每次从集合中删除任何 模型时，都会触发remove() 函数。

这意味着无论何时删除模型，所有CurrentEventItem View 实例都将被删除。

现在，关于页面上的 View :

它一定与您在页面中附加/添加/html 编辑 View 的方式有关。检查您的其他 View ，也许如果您有某种CurrentEventsContainer View ，请从那里检查您的代码因为对于您当前的代码，它确实会删除该 View ，尽管< em>全部不过。

推荐修复:

将您的绑定(bind)更改为:

this.model.bind('remove',this.remove);

并确保在实例化它时传递模型，这样每个 View 都会有一个对应的模型，如下所示:

//...
addAllItem: function(){ 
      _.each(this.collection, this.addOneItem())
},
addOneItem: function(model){
      var currentEventItem = new MyApp.Views.CurrentEventItem({model:model});
      //...more code..
}
//...

在我看来，这让事情更容易管理。

更新(来自您更新的问题)

您无法使用 this.el 的原因是您没有将正确的上下文传递给 add() 函数。您需要在 initialize() 函数中添加 _.bindAll(this,'add') 以传递正确的上下文，因此使您的 this 正确，允许您在 add 函数中使用 this.el。另外，将您的代码更改为:

MyApp.CurrentEvents.bind('new', this.add, this); 这会传递正确的上下文。另外，为什么不使用 add 作为事件呢？