Marionette - 应用程序和模块之间的关系答案

【问题标题】：Marionette - Relationships between Application and ModuleMarionette - 应用程序和模块之间的关系
【发布时间】：2013-02-20 16:33:45
【问题描述】：

我们目前正在构建一个基于 Marionette 的应用程序。基本上，我们有一个 Marionette 应用程序，其中定义了多个区域。每个区域将充当不同模块的容器以显示其视图。我希望每个模块都能完全控制其容器中显示的内容，但我希望应用程序分配这些区域。为简单起见，假设每个模块只有一个简单的 ItemView。

我正在考虑使用模块视图填充这些区域的 2 种方法。

第一种方法说的是，当每个模块初始化时，都会创建自己的视图，并调用应用程序在指定区域显示自己的视图，例如：

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

第二种方法表示每个模块都应该公开一些返回其视图的函数。应用程序将在准备好时调用该函数，并将视图粘贴在指定区域。

我不确定哪种方法更好，很乐意听取意见。

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

我肯定会采用第二种方法，在过去采用第一种方法之后，我现在遇到了这种方法的局限性并转向第二种方法。我写了一篇关于它的博文here

【讨论】：

非常正确。模块应提供“容器”视图来呈现模块。它应该不必担心如何在 DOM 中显示它：这是应用程序的工作。保持关注点分离。

【解决方案2】：

这取决于您采用哪种方法，两者都可以，我们选择第二个选项，因为我们使用 require.js 来动态加载我们的模块。

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

【讨论】：