Backbone.Marionette Fade Transition for only specific regions?

Question

I know I can override all regions to add a fade transition by using the following.

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

Is there a way to only override specific regions or views? I have certain regions in my layout that I would like to be able to fade in while other regions should be rendered instantly.

Thanks,

dk

Answer 1

You can define a custom Region the way you can define any Backbone object, and add this code to that region type.

MyRegion = Backbone.Marionette.Region.extend({

  el: "#some-element",

  open: function(view){
    this.$el.hide();
    this.$el.html(view.el);
    this.$el.fadeIn();
  }

});

MyApp.addRegions({
  myRegion: MyRegion
});

Note that I included the el in the region definition. If you want to re-use this across multiple regions, you'll have to create a base region and extend from that for each one that you need.

FadeInRegion = Backbone.Marionette.Region.extend({

  open: function(view){
    this.$el.hide();
    this.$el.html(view.el);
    this.$el.fadeIn();
  }

});

MyApp.addRegions({
  myRegion: FadeInRegion.extend({el: "#some-element"}),
  anotherRegion: FadeInRegion.extend({el: "#another-element"})
});