Backbone.js `model.destroy ()` custom transitions?

Question

When I use Backbone model.destroy() , it automatically removes this view from the DOM.

Is there a way to use destroy() to send a DELETE request, but remove the view itself from the DOM?

Sort of:

 this.model.destroy({ wait: true, success: function(){ $('#myElement').animate({ "height" : "0", 1000, function(){$('#myElement').remove()} }); } }); 

Answer 1

You need to override _onCollectionRemove() depending on what kind of collection contains element views ( documentation ). This is a function that is called when your model is removed from the collection, and also that destroys your view. In particular, how you decide to override this is up to you, but it may be easiest to override it using the animation function, perhaps in the following lines ...

 _onCollectionRemove: function(model) { var view = this.children.findByModel(model); var that = this; view.$('#myElement').animate({ "height" : "0", 1000, function(){ that.removeChildView(view); that.checkEmpty(); } }); } 

If you prefer to handle the removal manually manually in the destroy callback, simply override _onCollectionRemove() to contain the empty function and do whatever you want in the callback of your delete request. However, I recommend using the approach described above rather than doing it in the destroy callback. Completely eliminating the function and then executing it elsewhere in your code interferes with the flow of events scheduled by Marionette. A simple function override with a different user interface effect preserves the natural flow.

EDIT . Another user previous answer (now removed due to downvoting) suggested that it would be wise to call destroy after the user interface effect is complete. This is not a good approach to the reason OP points out - if something went wrong with the destroy method (for example, if the remote server is down), it seems to the user as if the model was deleted (the user interface effect is already completed) , although the server was unavailable and the model remained.

Answer 2

the mentioned BeforeDestroy method does not work for me. It throws an error in the spine (there is no delete method) My solution has the same approach and works fine in itemView

 remove: function(){ this.$el.animate({"height" : "0"},500, function(){ $(this).remove(); }); }, 

Answer 3

You need to use one of:

• collection .remove model
• collection.reset collection.model

Each of these methods will re-render your collection or composite view.

It is wrong to delete an item from a collection / composite view directly using js or jQuery;

Answer 4

Instead of focusing on a model event, we can focus on the review life cycle. For this purpose, Marionette makes the onBeforeDestroy callback available on Marionette.View (which expands with all kinds of Marionette). In ItemView, you define a callback like this

 onBeforeDestroy: function () { $('#myElement').animate({ "height" : "0", 1000 }); } 

This is an important disclaimer here. Since $.animate is an asynchronous function, it is possible that the view may be deleted before the $.animate transition completes. So, we have to make changes to our onBeforeDestroy .

 onBeforeDestroy: function () { var animationDelay = 1000ms; this.remove = _.delay(_.bind(this.remove, this), animationDelay ); this.$el.animate({ "height" : "0", animationDelay }); } 

Essentially, here we set the View.remove() method to run after an animation run, ensuring that when this.remove is called, it will be called asynchronously after the animation run. You can also do this with Promises, I suppose, but this is a bit expensive.