我正在开发具有几个不同功能区域的 MarionetteJS Web 应用程序。例如,一个是“仪表板”,另一个是“组”,第三个是“事件”,每个都有自己的特定路线。
例如。
等等。
过去,我使用 Marionette 模块将主 Application 对象分割成可以启动和停止的部分。当正在开发的应用程序是 100% 单页应用程序时,这很有用 - 这意味着我可以从服务器加载 MVC 路由(例如
http://example.com/dashboard
)并启动适当的 Marionette 组件。 http://example.com/groups
将启动一组不同的 Marionette 组件在当前状态下(在撰写本文时,2.4.2)Marionette 已弃用 Module 组件,转而支持其他模块加载机制。在上面给出的示例中,是否仍然可以使用不同的架构方法将 Marionette 应用程序分割成独立触发的部分?在我看来,我可以:
最佳答案
我将使用 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
});
我省略了这个例子中的模型、集合和 View ,但我希望你能明白要点。
您的应用程序是一个扩展的 Marionette 应用程序,您可以在其中注册模块。
每个模块都位于自己的文件夹中,其中包含一个 index.js 文件,该文件用作模块的入口点。在此文件中,您将构建一个 Marionette 对象,用作模块的 Controller 。
每个模块都有自己的路由器,在 index.js 文件中将 Marionette 对象作为 Controller 。
根据需要添加模型、集合、 View 和模板。对于模块之间的通信,您可以使用 Backbone.Radio。
最后,您在 main.js 中引导您的应用程序、主要布局和模块,并使用 browserify 或 webpack 构建它。
免责声明
这个架构不是我自己发明的,但目前我不记得原始来源。
关于architecture - MarionetteJS 和 "Sub Applications",我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32426138/