MarionetteJS和「子應用程序」

Question

我正在研究具有幾個不同功能區域的MarionetteJS Web應用程序。例如，一個是「儀表板」，另一個是「組」，第三個是「事件」，每個都有自己的特定路線。

E.g.

• /儀表板顯示＃
• /組＃列表
• /組＃顯示/ 123
• /事件＃V/9876 /與會者

等

在過去我使用Marionette模塊將主應用程序對象分割爲可以啓動和停止的部分。當正在開發的應用程序是100％單頁應用程序時，這非常有用 - 這意味着我可以從服務器加載MVC路線（如http://example.com/dashboard），並啓動適當的Marionette組件。 http://example.com/groups將啓動一組不同的Marionette組件

在其當前狀態（撰寫本文時，2.4.2）Marionette已棄用Module組件以支持其他模塊加載機制。在上面給出的例子中，是否仍有可能使用不同的架構方法將Marionette應用程序分割爲獨立觸發的塊？我可以這樣看：

1. 創建多個Marionette.Application（）對象並將它們彼此獨立加載。
2. 利用Marionette.Object（）並以某種方式將Marionette.Application（）對象擴展爲子組件。
3. 創建一個偵聽根URL（事件/，儀表板，組）的「主」路由器，然後創建「子路由器」來擴展它以提供更多功能。

Answer 1

我會用下面的方法使用CommonJS模塊。這些子應用程序或模塊不能啓動或停止，但它們提供了很好的分離。

app.js

var Marionette = require('backbone.marionette'); 
var _ = require('underscore'); 

module.exports = Marionette.Application.extend({ 
    initialize: function() { 
     this._modules = []; 
    }, 

    addModule: function(name, klass ,options) { 
     var module = new klass(options); 

     this._modules[name] = module; 
    } 
}); 

layout.js

var Marionette = require('backbone.marionette'); 

module.exports = Marionette.LayoutView.extend({ 
    el: '#app', 

    regions: { 
     header: '[data-region="header"]', 
     main: '[data-region="main"]' 
    } 
}); 

基團/ index.js

var Marionette = require('backbone.marionette'); 

var Router = require('./router'); 

var Group = require('./model/group'); 
var GroupCollection = require('./model/group_collection'); 

var GroupListView = require('./list/collection_view'); 
var GroupDetailView = require('./detail/group_view'); 

module.exports = Marionette.Object.extend({ 
    initialize: function(options) { 
     this.container = options.container; 

     this.router = new Router({ 
      controller: this 
     }); 

     this.groups = new GroupCollection(); 
    }, 

    groupList: function() { 
     var groupListView = new GroupListView({ 
      collection: this.groups 
     }); 

     this.groups.fetch(); 

     this.container.show(groupListView); 
    }, 

    groupDetail: function(id) { 
     var groupDetailView = new GroupDetailView({ 
      model: this.groups.findWhere({id: id}) 
     }); 

     this.container.show(groupDetailView); 
    } 
}); 

組/ router.js

var Marionette = require('backbone.marionette'); 

module.exports = Marionette.AppRouter.extend({ 
    appRoutes: { 
     'groups': 'groupList', 
     'groups/:id': 'groupDetail' 
    } 
}); 

main.js

var Backbone = require('backbone'); 

var Application = require('./app'); 
var MainLayout = require('./layout'); 

var HeaderApp = require('./header'); 
var GroupsApp = require('./groups'); 

var app = new Application(); 
var layout = new MainLayout(); 

app.addModule('header', HeaderApp, { 
    container: layout.getRegion('header') 
}); 

app.addModule('groups', GroupsApp, { 
    container: layout.getRegion('main') 
}); 

app.start(); 

Backbone.history.start({ 
    pushState: true 
}); 

我省略了模型，收藏和欣賞到這個例子，但我希望你得到的要點。

您的應用程序是一個擴展的木偶應用程序，您可以在其上註冊模塊。

每個模塊都存放在它自己的文件夾中，並帶有一個index.js文件作爲模塊的入口點。在這個文件中，你建立一個Marionette對象，作爲你模塊的控制器。

每個模塊都有它自己的路由器，在index.js文件中包含Marionette對象，因爲它是控制器。

隨意添加模型，集合，視圖和模板。對於模塊之間的通信，您可以使用Backbone.Radio。

最後，在main.js中引導您的應用程序，主要佈局和模塊，並使用browserify或webpack構建它。

免責聲明

我沒有發明這個架構自己，但此刻我不記得原來的來源。