Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Backbone Marionette - Add a visual effect when switching view

Is there a convenient way to add an effect when I leave a page (close a view/layout) and open a new one in the same region ? (something like a fade effect)

like image 380
xiris Avatar asked Jul 26 '12 16:07

xiris


3 Answers

Marionette regions have a method called open that by default just replace the HTML of the old view with the new view. You can override this method to do any animation you like. From the region documentation:

Set How View's el Is Attached

If you need to change how the view is attached to the DOM when showing a view via a region, override the open method of the region. This method receives one parameter - the view to show.

The default implementation of open is:

Marionette.Region.prototype.open = function(view){
  this.$el.html(view.el);
}

This will replace the contents of the region with the view's el / content. You can change to this be anything you wish, though, facilitating transition effects and more.

Marionette.Region.prototype.open = function(view){
  this.$el.hide();
  this.$el.html(view.el);
  this.$el.slideDown("fast");
}

This example will cause a view to slide down from the top of the region, instead of just appearing in place.

like image 169
Tony Abou-Assaleh Avatar answered Oct 22 '22 11:10

Tony Abou-Assaleh


You could override the close function on the view, doing something like this:

close: function () {
  // fancy fade-out effects
  Backbone.Marionette.View.prototype.close.apply(this, arguments);
}

And do something similar with your render functions.

like image 7
clem Avatar answered Oct 22 '22 13:10

clem


This seems to work for me:

this.views = {
    messageItem: Marionette.ItemView.extend({
        template: Handlebars.templates.messaging_item,
        tagName: "li",
        className: "messaging-item",
        render: function(){
            this.$el.html(this.template(this.model.attributes));
            this.$el.hide();
        },
        onShow: function(){
            this.$el.slideDown(800);
        }
    })
};
like image 7
Joel Ephroni Avatar answered Oct 22 '22 11:10

Joel Ephroni