如何在删除模型时使用另一个模板：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 调用我想要删除的旧模板时，而不是新模板。

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（现已弃用）等执行相同操作

如何在删除模型时使用另一个模板：backbone.js & marionettejs

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

javascript

jquery

backbone.js

marionette