从 collection 中删除时从视图中删除项目

Question

我正在使用 Backbone.js。我正在收听 collection

的 "add" 事件

this.listenTo(this.collection, "add", this.addOne);

它会像这样附加视图 object：

addOne: function (as) {
        var v = new XUView({model: as}).render();
        $(v.el).prependTo($('#object-list')).hide().fadeIn().slideDown();
}

现在，如果项目已从 collection 中删除，我想从视图中自动删除 objects。我正在收听 "remove" 事件：

this.listenTo(this.collection, "remove", this.removeOne);

我为删除功能尝试了几种方法，但其中 none 成功了。 removeOne 函数被正确触发，但正如我所说，没有效果。如何从我的前端删除视图 object？

我已经试过了：

XUView.remove(XUView.where(as));

XUView.remove(as);

this.collection.remove(as);

this.collection.remove(this.collection.where(as));

Answer 1

您必须在集合和模型视图之间保持映射 table。当基于该映射触发删除事件时 table 您知道应该删除 DOM 中的哪个元素或哪个是视图。

在 addOne 函数中，您可以在模型上设置视图

addOne: function (as) {
        var v = new XUView({model: as});
        v.render();
        as.view = v;
        $(v.el).prependTo($('#object-list')).hide().fadeIn().slideDown();
}

并在删除函数中

removeOne:function(model){
  model.view.remove();
}

从 collection 中删除时从视图中删除项目

Remove item from view when removed from collection

javascript

jquery

backbone.js