我正在开发一个具有多个不同功能区域的MarionetteJS Web应用程序。例如,一个是"仪表板",另一个是" groups",第三个是" events",每个都有自己的特定路线。
E.g。
等
过去我使用Marionette模块将主要的Application对象分割成可以启动和停止的部分。当正在开发的应用程序是100%单页应用程序时这很有用 - 这意味着我可以从服务器加载MVC路由(例如http://example.com/dashboard
)并启动相应的Marionette组件。 http://example.com/groups
将启动另一组Marionette组件
在当前状态(撰写本文时,2.4.2),Marionette已弃用Module组件,转而采用其他模块加载机制。在上面给出的示例中,是否仍然可以使用不同的架构方法将Marionette应用程序分段为独立触发的片段?我看到它的方式,我可以:
答案 0 :(得分:5)
我会使用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
});
我省略了这个例子中的模型,集合和视图,但我希望你能得到主旨。
您的应用程序是扩展的Marionette应用程序,您可以在其中注册模块。
每个模块都位于自己的文件夹中,并带有index.js文件,该文件用作模块的入口点。在此文件中,您将构建一个Marionette对象,作为模块的控制器。
每个模块都有自己的路由器,而index.js文件中的Marionette对象就是它的控制器。
随意添加模型,集合,视图和模板。对于模块之间的通信,您可以使用Backbone.Radio。
最后,您在main.js中引导您的应用程序,主要布局和模块,并使用browserify或webpack构建它。
<强>声明强>
我自己并没有发明这种架构,但此刻我不记得原始的源码。