MarionetteJS 和 "Sub Applications"

Question

我正在开发一个具有多个不同功能区域的 MarionetteJS 网络应用程序。例如，一个是"dashboard"，另一个是"groups"，第三个是"events"，每个都有自己特定的路线。

例如

/仪表板#show
/组#list
/组#show/123
/事件#v/9876/attendees

等等

过去我使用 Marionette 模块将主要的 Application 对象分割成可以启动和停止的部分。当正在开发的应用程序是 100% 单页应用程序时，这很有用——这意味着我可以从服务器加载 MVC 路由（例如 <a href="http://example.com/dashboard" rel="nofollow">http://example.com/dashboard</a>) and kick off the appropriate Marionette component(s). <a href="http://example.com/groups" rel="nofollow">http://example.com/groups</a> 会启动一个不同的一组 Marionette 个组件

在其当前状态（在撰写本文时，2.4.2）Marionette 已弃用 Module 组件以支持其他模块加载机制。在上面给出的示例中，是否仍然可以使用不同的架构方法将 Marionette 应用程序分割成独立触发的片段？在我看来，我可以：

创建多个 Marionette.Application() 对象并独立加载它们。
利用 Marionette.Object() 并以某种方式将 Marionette.Application() 对象扩展到子组件中。
创建一个 "main" 路由器来侦听根 URL（事件/、仪表板、组），然后创建 "sub-routers" 扩展它以提供更多功能。

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"]'
    }
});

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

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

我省略了这个例子中的模型、集合和视图，但我希望你能理解要点。

您的应用程序是一个扩展的 Marionette 应用程序，您可以在其中注册模块。

每个模块都位于它自己的文件夹中，其中有一个 index.js 文件作为模块的入口点。在此文件中，您将构建一个 Marionette 对象作为模块的控制器。

每个模块都有自己的路由器，index.js 文件中的 Marionette 对象作为它的控制器。

随意添加模型、集合、视图和模板。对于模块之间的通信，您可以使用 Backbone.Radio.

最后 bootstrap 您的应用程序、主要布局和模块 main.js，并使用 browserify 或 webpack 构建它。

免责声明

这个架构不是我自己发明的，但目前我不记得原始来源了。

MarionetteJS 和 "Sub Applications"

MarionetteJS and "Sub Applications"

architecture

marionette