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

Question

When I use Backbone's model.destroy(), it seems to automatically remove that view from the DOM.

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

Something like:

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

Answer 1

the mentioned onBeforeDestroy method does not work for me. It throws an error in backbone (remove method missing) My solution has the same aproach and is working very well in itemView

remove: function(){

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

},

Answer 2

You need to override _onCollectionRemove() in whichever Collection view contains the item views (documentation). This is the function which is called when your model is removed from the collection, and it's also what's destroying your view. Specifically how you choose to override it is up to you, but it might be easiest to override it with your animation function, maybe along 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 of the view manually in your destroy callback, just override _onCollectionRemove() to contain an empty function and do whatever you'd like in the callback of your delete request. I'd recommend the approach I describe above rather than doing it in your destroy callback, though. Completely eliminating the function and then handling it's responsibilities elsewhere in your code interferes with Marionette's intended event flow. Simply overriding the function with a different UI effect preserves the natural flow.

EDIT: Another user's previous answer (now deleted due to downvoting) suggested that it might be wise to call destroy after the UI effect was completed. This is not a good approach for the reason OP pointed out - if something goes wrong with the destroy method, (for example, if the remote server goes down) it appears to the user as if the model was deleted (the UI effect had already completed) even though the server was unreachable and the model remains.

Answer 3

Instead of focusing in the model event, we can focus on the view life cycle. For that purpose, Marionette makes the onBeforeDestroy callback available on Marionette.View (which is extended by all Marionette views). In your ItemView you'd define the callback like this

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

They're is an important caveat here. Since $.animate is an asynchronous function, it is possible that the view may be removed before $.animate finishes the transition. So, we have to make a modification to our onBeforeDestroy.

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

Essentially, what we did here is set the View.remove() method to fire after the animation has run through, ensuring that when this.remove is called, it's called asynchronously, after the animation has run through. You could also do this with Promises, I suppose, but that requires a bit more overhead.

Answer 4

You need to use one of:

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

Every of this methods will re-render your collection or composite view.

It is not Good practice to remove element from collection/composite view directly by using js or jQuery;