如何在刪除模型時使用另一個模板：backbone.js＆marionettejs

Question

我想加載另一個模板並在使用model.destroy（）刪除我的DOM元素時應用動畫。 當我使用類似下面

_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); 
     } 

但是，當過_onCollectionRemove所謂舊的，我想刪除呈現，而不是新的模板，模板的答案Backbone.js `model.destroy()` custom transitions? 的一個描述。

Answer 1

在Backbone或Marionette中，當模型/集合被刪除時，視圖不會自動移除。您可以使用這個事實以任何你想要的方式來動畫你的視圖。這裏有一個例子：

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); 
    } 
}) 

我已經創建了一個plunkr short demo，所以你可以檢查一下你自己的。
有可能對Backbone的CollectionView/CompositeView（現在不推薦使用）做相同的處理/等。