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

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

我的收藏是非常基本的

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) ，尽管我不确定这是否是问题。

---

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

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

这意味着，只要模型被删除， 所有 CurrentEventItem视图实例都将被删除。

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

它必须与您在页面中添加/添加/浏览视图的方式有关。 检查你的其他视图，也许如果你有某种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()函数。 您需要在initialize()函数中添加_.bindAll(this,'add')以传递正确的上下文，从而使您的this正确，从而允许您在add函数中使用this.el 另外，将您的代码更改为：

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

---

继续我在评论中所说的内容，现在你已经实现了这种方式，当它们中的任何一个从集合中被移除时，它们将从页面中删除所有CurrentEventItem视图。 原因如下：

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

这基本上就是说，“每次在集合上触发remove事件时，都会调用this.remove 。” 因此，每当您实例化这些视图中的一个时，您还告诉集合在集合触发remove事件时移除该视图。 我创建了一个小提示向你展示问题。

你说得对，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();
    }
  }

看看这种微小的调整如何改变行为？ 在这里查看它的行动。

如果你遵循这种模式，你应该看到正确的视图被删除。

链接地址: http://www.djcxy.com/p/48313.html

上一篇: remove from collection bind to remove from view

下一篇: backbone.js nested collection, add event fires, but returns parent model