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中，当删除模型/集合时，视图不会自动删除。您可以使用此事实以您想要的任何方式为视图设置动画。这是一个例子：

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（现已弃用）/ etc也可以这样做。

删除模型时如何使用另一个模板：backbone.js＆amp; marionettejs

1 个答案: