Remove item from view when removed from collection

I'm using Backbone.js. I am listen to the "add" event of my collection

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

and it will append the view object like this:

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

Now I want to automatically remove objects from the view if the item has been deleted from the collection. I am listening on the "remove" event:

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

And I tried several things for the remove function, but none of them did the job. The removeOne function is triggered correctly, but as I said, without effect. How can I remove the view object from my frontend?

I already tried:

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

XUView.remove(as);

this.collection.remove(as);

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

---

You have to keep a mapping table between your collection and the model views. When the remove event is trigger based on that mapping table you know which element from DOM should be removed or which is the view.

in addOne function you could setp the view on your model

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

and in remove function

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

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

上一篇: Thrift，Protocol Buffers，JSON，EJB等性能比较？

下一篇: 从收藏中移除时从视图中删除项目