Question

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

我的收藏很基本

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();
  }
});

当我从集合中删除模型时，它会触发remove函数，但视图仍然在页面上。在控制台中，我可以看到模型，但我相信模型应该有'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

继续我在评论中所说的，您现在实现此功能的方式将在任何时从页面中删除所有 CurrentEventItem个视图它们已从集合中删除。原因如下：

MyApp.CurrentEvents.bind('remove',this.remove);

这基本上是说，“每次在集合上触发remove事件时，请致电this.remove。”因此，每次实例化其中一个视图时，您还会告诉集合在集合触发remove事件时删除该视图。我创建了一个fiddle来向您展示问题。

Backbone知道哪个模型已经从集合中删除了，但你没有利用它。你可以这样做：

  removeFromView: function(model) {
    // Check to make sure the model removed was this.model
    if (model.cid === this.model.cid) {
      $(this.el).unbind();
      $(this.el).remove();
    }
  }

了解这种微小调整如何改变行为？在行动here中查看。

如果您遵循此模式，您应该会看到正确的视图被删除。

Answer 2

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

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

这意味着只要删除模型，全部 {@ 1}}视图实例就会被删除。

现在，关于页面上的视图：

它必须与您在页面中添加/添加/ html-ed视图的方式有关。检查您的其他视图，也许如果您有某种CurrentEventItem视图，请从那里检查您的代码，因为使用您当前的代码，它会删除视图，尽管 all他们虽然。

推荐修正：

将您的绑定更改为：

CurrentEventsContainer

并确保在实例化时，传递this.model.bind('remove',this.remove);以便每个视图都有相应的模型，如下所示：

model

在我看来，这使得事情变得更容易管理。

更新（来自您更新的问题）

您无法使用//... addAllItem: function(){ _.each(this.collection, this.addOneItem()) }, addOneItem: function(model){ var currentEventItem = new MyApp.Views.CurrentEventItem({model:model}); //...more code.. } //...的原因是您没有将正确的上下文传递到this.el函数中。您需要在add()函数中添加_.bindAll(this,'add')以传递正确的上下文，从而使initialize()更正，从而允许您在this函数中使用this.el 。另外，将代码更改为：

add这传递了正确的背景。另外，为什么不将MyApp.CurrentEvents.bind('new', this.add, this);用作事件？

从集合中删除绑定以从视图中删除

2 个答案: