how to use another template while removing model :backbone.js & marionettejs

Question

I am trying to load another template and apply animation when ever my DOM element is removed by using model.destroy(). As described in one of the answer Backbone.js `model.destroy()` custom transitions? I am using something like below

_onCollectionRemove: function(model) {
           var view = this.children.findByModel(model);
           view.template = require('handlebars').compile(require('myTemplatePath'));
           view.render();
           view.$el.fadeToggle(300, 'linear'); // For animation
           var func = _.bind(function() {
                this.removeChildView(view);
                this.checkEmpty();
            }, this);
            setTimeout(func, 300);
        }

But when ever _onCollectionRemove called older template that i want to remove is rendered, rather then the new template.

Answer 1

Either in Backbone or in Marionette, view is not removing automatically when model / collection is being removed. You could use this fact to animate your view in any way you want. Here is an example:

var View = Marionette.ItemView.extend({
  template: _.template("<div>Initial view</div>"),
  modelEvents: {
    "destroy": "startDestroying"
  },
  startDestroying: function () {
    this.template = _.template("<div class='destroying'>Destroying view</div>")
    this.render()
    var opacity = 1
    var interval = setInterval(function () {
      opacity -= 0.1
      this.el.style.opacity = opacity
      if (opacity <= 0) {
        window.clearInterval(interval)
        this.remove()
      }
    }.bind(this), 100);
  }
})

I've created a short demo on plunkr, so you could check it on your own.
It is possible to do the same with Backbone's CollectionView / CompositeView (which is deprecated now) / etc.