Backbone.Marionette Fade Transition for only specific regions?

9
votes

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

2
marionette

2 Answers

16
votes

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"})
});
-1
votes

Another option that I just used was to override the open method for animations was to create a separate config file, override the open method in that config file, and conditional logic to test for className. So here's what I did with coffee script and using Marionette modules.

Create my view:

@Item.module "ItemApp.Add", (Add, App, Backbone, Marionette, $,_) ->

    class Add.Item extends Marionette.ItemView

        template: "#add-item"
        className: "add-modal"

And in my config file I just test the className to perform the desired animation:

do (Marionette) ->
    _.extend Marionette.Region::,
        open: (view) ->
            if view.el.className == "add-modal"
                console.log "the add-modal has been called"
                @$el.hide()
                @$el.html(view.el)
                @$el.show().animate "left": '0', queue: false