Marionette - Beziehungen zwischen Anwendung und Modul

Question

Wir bauen gerade eine Marionetten-basierte Anwendung. Grundsätzlich haben wir eine Marionette-Anwendung, die mehrere Regionen definiert hat. Jede Region dient als Container für verschiedene Module, um ihre Ansichten anzuzeigen. Ich möchte, dass jedes Modul die volle Kontrolle darüber hat, was in seinem Container angezeigt wird, aber ich möchte, dass die Anwendung diese Regionen zuweist. Zur Einfachheit sagen wir, dass jedes Modul nur eine einfache ItemView hat.

Ich betrachte 2 Ansätze zum Auffüllen dieser Regionen mit den Modulansichten.

Der erste Ansatz sagt, dass, wenn jedes Modul initialisiert wird, wird es seine Ansicht erstellen und es wird die Anwendung aufrufen, ihre Ansicht im angegebenen Bereich angezeigt werden, zum Beispiel:

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

Die zweite Ansatz besagt, dass jedes Modul eine Funktion verfügbar machen sollte, die seine Ansicht zurückgibt. Die Anwendung wird diese Funktion aufrufen, wenn sie bereit ist, und sie wird die Ansicht in der angegebenen Region festhalten.

Ich bin mir nicht sicher, welcher Ansatz besser ist und wäre glücklich, Meinungen zu hören.

Answer 1

ich auf jeden Fall mit dem zweiten Ansatz gehen würde, nachdem sie in der Vergangenheit mit dem ersten Ansatz gegangen ich jetzt den Grenzen dieses Ansatzes schlagen und mit dem zweiten Ansatz zu bewegen. Ich schrieb einen Blog-Beitrag darüber here

Answer 2

Es hängt davon ab, welchen Ansatz Sie nehmen, beide sind in Ordnung, wir wählen die zweite Option, weil wir require.js verwenden, um unsere Module dynamisch zu laden.

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