javascript - Marionette - Relationships between Application and Module - Stack Overflow

admin管理员组

文章数量:1315258

We are currently building a Marionette based application. Basically, we have a Marionette Application that has multiple regions defined on it. Each region will act as a container for different Modules to display their views. I want each Module to have full control of what is being displayed in it's container, but I want the Application to allocate these regions. For simplicity, let's say that each module just has a simple ItemView.

I'm considering 2 approaches to populating those regions with the module views.

The first approach says that when each module is initialized, it will create its view and it will call the application to display its view in the specified region, for example:

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

The second approach says that each module should expose some function that returns its view. The Application will call that function when ready and it will stick the view in the designated region.

I'm not sure which approach is better and would be happy to hear opinions.

We are currently building a Marionette based application. Basically, we have a Marionette Application that has multiple regions defined on it. Each region will act as a container for different Modules to display their views. I want each Module to have full control of what is being displayed in it's container, but I want the Application to allocate these regions. For simplicity, let's say that each module just has a simple ItemView.

I'm considering 2 approaches to populating those regions with the module views.

The first approach says that when each module is initialized, it will create its view and it will call the application to display its view in the specified region, for example:

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

The second approach says that each module should expose some function that returns its view. The Application will call that function when ready and it will stick the view in the designated region.

I'm not sure which approach is better and would be happy to hear opinions.

• javascript
• backbone.js
• marionette

Share Improve this question Follow edited Feb 20, 2013 at 16:40 Joris Ooms 12k1818 gold badges6969 silver badges124124 bronze badges asked Feb 20, 2013 at 16:33 elanhelanh 1,45133 gold badges2020 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I would definitely go with the second approach, after having gone with the first approach in the past I am now hitting the limitations of this approach and moving to the second approach. I wrote a blog post about it here

It depends which approach you take, both are fine, we choose the second option because we use require.js to load our modules dynamically.

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

      template: Handlebars.pile(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);

本文标签： javascriptMarionetteRelationships between Application and ModuleStack Overflow