Reputation: 17
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.
Upvotes: 1
Views: 69
Reputation: 2217
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.
Upvotes: 1