MarionetteJS и «Sub Applications»

Question

Я работаю над веб-приложением MarionetteJS с несколькими различными функциональными областями. Например, «панель», другая - «группы», а третья - «события», каждая из которых имеет свои собственные маршруты.

E.g.

• /приборная панель # показать
• /группы # список
• /группы # показать/123
• /События # V/9876/чел

т.д.

В в прошлом я использовал модули Marionette для сегментации основного объекта приложения в куски, которые можно запускать и останавливать. Это было полезно, когда разрабатываемое приложение представляет собой одностраничное приложение на 100%, то есть я могу загрузить маршрут MVC с сервера (например, http://example.com/dashboard) и запустить соответствующий компонент (-ы) Marionette. http://example.com/groups будет запускать другой набор компонентов (компонентов) Marionette

В текущем состоянии (на момент написания этой статьи, 2.4.2) Марионетон отказался от компонента модуля в пользу других модулей загрузки модуля. В приведенном выше примере все еще возможно использовать другой архитектурный подход для сегментации приложения 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 
}); 

Я опустил модели, коллекцию и представление из этого примера, но я надеюсь, что вы получите суть.

Ваше приложение является расширенным приложением Marionette, где вы можете зарегистрировать модули.

Каждый модуль находится в собственной папке с файлом index.js, который служит точкой входа для модуля. В этом файле вы создаете объект Marionette, который служит в качестве контроллера для вашего модуля.

Каждый модуль имеет собственный маршрутизатор с объектом Marionette в файле index.js в качестве его контроллера.

Добавьте модели, коллекции, виды и шаблоны, как вам будет угодно. Для связи между модулями вы можете использовать Backbone.Radio.

Наконец, вы загрузите свое приложение, основной макет и модули в main.js, и создайте его с помощью браузера или веб-пакета.

Отказ

Я не придумал эту архитектуру сам, но в данный момент я не помню оригинал.