MarionetteJS "sliding" transitions

Question

I am building a Backbone Marionette application that includes a header Region, a footer(menu) Region, and a content Region. I'm following along with the MarionetteJS - A Gentle Introduction book.

My goal is to get the main content Region to slide views left and right intelligently based on the back/forward buttons. The closest I've gotten to this is to use the following code, which will slide the content upwards, but now this is the same for every piece of content loaded in any Region (header and footer included). I'd like to have more control over what type of animation is used and for what ItemView/CompositeView.

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

Any suggestions?

Answer 1

Extending Marionette.Region.prototype is a bad idea. You should define your own custom region class and use it with only those regions that you want

Example:

var HeaderRegion = Backbone.Marionette.Region.extend({
    open: function(view){
        this.$el.hide();
        this.$el.html(view.el);
        this.$el.slideToggle("slow");
    }
});

MyApp.addRegions({
    headerRegion: {
        selector: "#header",
        regionType: HeaderRegion
    }
});

For more information read Marionette.Region documentation