Marionetka - relacje między aplikacją a modułem

Question

Obecnie tworzymy aplikację opartą na marionetce. Zasadniczo mamy aplikację marionetek, która ma wiele regionów zdefiniowanych na niej. Każdy region będzie działał jako kontener dla różnych modułów, aby wyświetlać ich widoki. Chcę, aby każdy moduł miał pełną kontrolę nad tym, co jest wyświetlane w jego kontenerze, ale chcę, aby aplikacja przydzieliła te regiony. Dla uproszczenia załóżmy, że każdy moduł ma prosty ItemView.

Rozważam 2 podejścia do zapełniania tych regionów widokami modułów.

Pierwsze podejście mówi, że gdy każdy moduł jest inicjowany, stworzy swój pogląd i to nazywamy aplikację, aby wyświetlić swój pogląd w określonym regionie, na przykład:

var app = new Marionette.Application(); 
app.addRegions({ 
    regionA: "#regionA", 
    regionB: "#regionB" 
}); 

app.module("moduleA", function(moduleA, app, ...){ 
    moduleA.on("start", function(){ 
     var viewA = new MyViewA(); 
     app.regionA.show(viewA); 
    } 
}); 

app.module("moduleB", function(moduleB, app, ...){ 
    moduleB.on("start", function(){ 
     var viewB = new MyViewB(); 
     app.regionB.show(viewB); 
    } 
}); 

drugim podejście mówi, że każdy moduł powinien ujawnić jakąś funkcję, która zwraca jego widok. Aplikacja wywoła tę funkcję, gdy będzie gotowa, i utworzy widok w wyznaczonym regionie.

Nie jestem pewien, które podejście jest lepsze i byłoby miło usłyszeć opinie.

Answer 1

pewno tam z drugim podejściu, po poszedł z pierwszym podejściem w przeszłości Jestem teraz uderzanie ograniczenia tego podejścia i przeniósł się do drugiego podejścia. Napisałem o tym wpis na blogu: here

Answer 2

Zależy od tego, jakie podejście podejmiesz, obie są w porządku, wybierzemy drugą opcję, ponieważ używamy require.js do dynamicznego ładowania naszych modułów.

var dashboardPage = Backbone.Marionette.Layout.extend({ 

     template: Handlebars.compile(tmpl), 

     regions: { 
     graphWidget  : "#graphWidget", 
     datePickerWidget: "#datePickerWidget", 
     searchWidget : "#searchWidget" 
     }, 

     widget: { 
      graphWidget: null, 
      datePickerWidget: null, 
      searchWidget: null, 
     }, 

initialize: function(options){ 

     this.someId= options.someId; 

     //if have someId ID - fetch model;   
     if(this.someId){ 
      //fetch model if campaignId not null 
      this.modelAjax = this.model.fetch(); 
     } 

     onShow: function() { 
      var that = this; 

      if(this.modelAjax){ 
      this.modelAjax.done(function(){ 

       that.widget.graphWidget= new graphWidget(graphWidgetOptions); 
       that.listenTo(that.widget.graphWidget, 'graphWidget', that.getGraphWidgetData, that); 
       .... 
       that.graphWidget.show(that.widget.graphWidget); 
       that.datePickerWidget.show(that.widget.datePickerWidget);