javascript - 如何在删除模型 :backbone. js 和 marionettejs 时使用另一个模板

Question

当使用 model.destroy() 删除我的 DOM 元素时，我尝试加载另一个模板并应用动画。 正如答案之一所述 Backbone.js `model.destroy()` custom transitions? 我正在使用类似下面的东西

_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 调用我想要删除的旧模板时，它会被渲染，而不是新模板。

Answer 1

无论是在 Backbone 中还是在 Marionette 中，删除模型/集合时 View 都不会自动删除。您可以利用这一事实以您想要的任何方式为您的 View 添加动画效果。这是一个例子:

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

我创建了一个short demo在plunkr上，所以你可以自己检查一下。
可以对 Backbone 的 CollectionView/CompositeView(现已弃用)/等执行相同的操作。