The below code is in a Backbone.View within the render function. I am using Backbone.Relational and jQuery UI Sortable.
var scopedThis = this;
// make this container a sortable container
this.$el.sortable({
connectWith: '.wlProductsInRoomContainer',
revert: true,
stop: function(){
scopedThis.getNewSortOrders();
},
receive: function(e, r){
// get model from newly passed in product
var prodModel = r.item.data().productView.model;
// add model to this collection but pass silent so collection add event doesn't get ran
scopedThis.collection.add(prodModel, { silent: true });
},
remove: function (e, r){
// get model from product that has left this sortable
var prodModel = r.item.data().productView.model;
// remove this model from this collection
scopedThis.collection.remove(prodModel);
console.log(scopedThis.collection);
}
});
The problem is happening in the sortable remove function. The element that has left the sortable contains its corresponding model in its .data(). So we retrieve it from there and try to remove it from this collection but when logging the collection afterwards the model never gets removed. What makes this especially strange is that the receive function above it which uses the same exact model to add works perfectly. Any ideas? I appreciate the help!