Backbone.Marionette Fade ¿Transición solo para regiones específicas?

Question

Sé que puedo anular todas las regiones para agregar una transición de fundido utilizando lo siguiente.

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

¿Hay alguna manera de anular solo regiones o vistas específicas? Tengo ciertas regiones en mi diseño que me gustaría que se desvanezcan mientras que otras regiones deberían representarse instantáneamente.

Gracias,

dk

Answer 1

Se puede definir una costumbre Region el camino se puede definir cualquier objeto Backbone, y añadir este código a ese tipo de región.

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 
}); 

Tenga en cuenta que incluí la el en la definición región. Si desea volver a utilizar esto en varias regiones, deberá crear una región base y ampliarla para cada una que necesite.

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

Answer 2

Otra opción que acabo de utilizar era reemplazar el método abierto para animaciones era crear un archivo de configuración distinto, reemplazar el método abierto en ese archivo de configuración, y la lógica condicional para la prueba de className. Así que esto es lo que hice con Coffee Script y el uso de módulos de Marionette.

Crear mi punto de vista:

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

    class Add.Item extends Marionette.ItemView 

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

Y en mi archivo de configuración que acaba de probar el className para llevar a cabo la animación deseada:

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