Przejście Frontu.Marionette dla wybranych regionów?

Question

Wiem, że mogę przesłonić wszystkie regiony, aby dodać przejście przejścia przez zanikanie, korzystając z następujących opcji.

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

Czy istnieje sposób na zastąpienie określonych regionów lub widoków? Mam pewne regiony w moim układzie, które chciałbym móc zanikać, podczas gdy inne regiony powinny być renderowane natychmiastowo.

Dzięki,

dk

Answer 1

Można zdefiniować niestandardowy Region sposób można zdefiniować dowolny obiekt kręgosłup, i dodać ten kod do tego typu regionie.

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

Należy pamiętać, że w definicji regionu podałem el. Jeśli chcesz ponownie użyć tego w wielu regionach, musisz utworzyć region bazowy i rozszerzyć go dla każdego, który potrzebujesz.

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

Inna opcja, że ​​po prostu był używany do przesłonić otwartą metodę animacji było stworzyć osobny plik konfiguracyjny, nadpisać metodę otwartej w tym pliku konfiguracyjnym, a logika warunkowe do testowania className. Oto, co zrobiłem ze skryptem do kawy i użyciem modułów marionetek.

Tworzenie mój widok:

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

    class Add.Item extends Marionette.ItemView 

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

A w moim pliku config Właśnie przetestowania className aby wykonać żądaną animację:

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