list - Model Backbone Views can't be removed from DOM at first Collection re-render -

i've been facing issue entire day now, , i'm kind of desperate! i'm pretty sure simple backbone experts around here...i'm new backbone , might have not taken best approach. or advice awesome!

the issue

after adding new item collection, collection re-rendered, , can see new item added dom. if click on 'remove' button event gets fired, , new item destroyed...but element stays in dom. if re render page, (refresh or navigate somewhere else , come back) it's gone.

whereas if add new item, navigate somewhere else right after collection rendered, come back, , press 'remove', time gets destroyed , removed dom... idea?

adding new item

save: function(e){     e.preventdefault();     var data = form2js('deviceform', '.', true);     //allow create or edit model;     this.model.set(data);     this.model = this.collection.create(this.model, {         wait: true,         success: function(){             utils.alert('success', 'device has been added/edited');             app.vent.trigger("devices:show");         }     }); } 

this code inside view shown when add new item. when new item gets added, calls function below. this.collection list of devices, reused inside router.

router

showdevices: function(){     if (!this.devices){         this.devices = new devices();         this.devices.fetch();     }     if (this.deviceslist) this.deviceslist.remove();     this.deviceslist = new devicesview({collection: this.devices});     $('.addpadding').hide().slidedown(1000, 'linear').html(this.deviceslist.render().el); }, 

i fetch list once , reuse every time need it, avoiding unnecessary fetch. clean view if existing , instantiate new one.

collection (view)

initialize: function(){     _.bindall(this, "render", "addone");      this.collection.on('add', this.addone);     this.collection.on('reset', this.addall); }, render: function(){     this.$el.html(this.template);     this.addall();     return this; }, addone:function(device){     var devi = new deviceview({model: device});     this.$el.find(".devices-list").append(devi.render().el); }, addall: function(){     this.collection.each(this.addone, this) } 

no el attribute defined in collection view. binding collection event gets rendered new item or fetch done.

item view

tagname: 'tr', events: {     'click .remdevice': 'removedevice',     'click .editdevice' : 'editdevice' }, template: _.template( template ), initialize: function(){     this.listento(this.model, 'destroy', this.remove); }, render: function(){     this.$el.html(this.template(this.model.tojson()));     return this; }, removedevice:function(){     this.model.destroy(); } 

my items appended table, tbody element. table inside template of collection view. when click on remove button, model destroyed , event fired , call this.remove. doesn't works when collection re rendered after creation of item. works after though...

hope gave enough information! lot in advance! ps: no error in console , model + collections populated in debugger.

edit: this.remove called @ each click since model gets destroyed every time. overriding , trying remove manually element with:

this.$el.remove(); 

makes no difference , doesn't show error. this.$el contains newly added element.

edit 2 new clue: if i've collection of 6 devices, add 7th, try delete of them, got destroyed not removed of dom unless re render. it's not linked new item only, fact added new item collection, rendered , try delete 1 item. also, edit function still works on each item , redirect me right page right model edit.

last edit tried empty collection before add new items avoid zombies...but didn't change anything. hoped have avoided random side effects in collection view

addall: function(){                 this.$el.find(".devices-list").empty();                 this.collection.each(this.addone, this)             }, 

i found "dirty" way fix issue. had breakpoints inside 'remove function'. visually comparing this.$el , line added table exact same line.

so tried this:

$('.devices-list').find(this.$el) 

but nothing returned...which crazy because contain exact same data! assumed this.$el rendered in zombie version or something. i'm pretty sure there wrong way items rendered point...but can't find out , i'm open suggestions...

solution

in device view/item view, edited these 2 functions, add tr model id, use jquery find in dom. focus on existing elements , not $el cached jquery stuff...

render: function(){         this.$el.html(this.template(this.model.tojson()));         this.$el.attr('id', this.model.id);         return this;     }, remove: function(){             var elem =  $('.devices-list').find('#'+this.model.id);             $(elem).find('#'+this.model.id).slideup(1000);             $(elem).find('#'+this.model.id).remove();         } 

hopefully better idea or helped solution!