Backbone.js 如何使用主干网和木偶网改进此控制器的结构和初始化

我正在开发一个带有主干和木偶的小应用程序，它在侧栏中显示部门列表，在主容器中显示员工列表

用户可以选择部门并按部门过滤员工列表。这是控制器和路由器的代码，但我不满意如何在控制器中初始化应用程序

控制器：

Users = require('../collections/users.coffee')
Departments = require('../collections/departments.coffee')
UserListView = require('../views/user-list.coffee')
DepartmentListView = require('../views/department-list.coffee')


module.exports = class Controller extends Marionette.Controller


    ###
    initialize
    ----------
    ###
    initialize: ->
        @users = new Users()
        @userListView = new UserListView(collection: @users)
        @departments = new Departments()
        @departmentListView = new DepartmentListView(collection: @departments)

        @app = new Backbone.Marionette.Application()
        @app.addRegions(
            users: '.js-users-container'
            departments: '.js-departments-container'
        )
        @app.users.show(@userListView)
        @app.departments.show(@departmentListView)

        @app.on("initialize:after", ->
            Backbone.history.start()
        )

        # App will start when the department list is rendered
        @listenTo(@departmentListView, 'composite:collection:rendered', =>
            @app.start()
        )
        # catch filter events
        @listenTo(App.events, 'filter-users', (filters) =>
            @users.fetch(data: filters)
        )
        # load the departments collection, will render department list view
        @departments.fetch(data: active: 1)



    ###
    index
    -----
    ###
    index: ->
        App.events.trigger('filter-users', null)


    ###
    getByDepartment
    ---------------
    ###
    getByDepartment: (id) ->
        App.events.trigger('filter-users', department: id)

Controller = require('./controllers/main.coffee')


module.exports = class Router extends Backbone.Marionette.AppRouter
    appRoutes:
        "": "index"
        "department/:id": "getByDepartment"

    initialize: ->
        @controller = new Controller()

router = new Router()

路由器：

Users = require('../collections/users.coffee')
Departments = require('../collections/departments.coffee')
UserListView = require('../views/user-list.coffee')
DepartmentListView = require('../views/department-list.coffee')


module.exports = class Controller extends Marionette.Controller


    ###
    initialize
    ----------
    ###
    initialize: ->
        @users = new Users()
        @userListView = new UserListView(collection: @users)
        @departments = new Departments()
        @departmentListView = new DepartmentListView(collection: @departments)

        @app = new Backbone.Marionette.Application()
        @app.addRegions(
            users: '.js-users-container'
            departments: '.js-departments-container'
        )
        @app.users.show(@userListView)
        @app.departments.show(@departmentListView)

        @app.on("initialize:after", ->
            Backbone.history.start()
        )

        # App will start when the department list is rendered
        @listenTo(@departmentListView, 'composite:collection:rendered', =>
            @app.start()
        )
        # catch filter events
        @listenTo(App.events, 'filter-users', (filters) =>
            @users.fetch(data: filters)
        )
        # load the departments collection, will render department list view
        @departments.fetch(data: active: 1)



    ###
    index
    -----
    ###
    index: ->
        App.events.trigger('filter-users', null)


    ###
    getByDepartment
    ---------------
    ###
    getByDepartment: (id) ->
        App.events.trigger('filter-users', department: id)

Controller = require('./controllers/main.coffee')


module.exports = class Router extends Backbone.Marionette.AppRouter
    appRoutes:
        "": "index"
        "department/:id": "getByDepartment"

    initialize: ->
        @controller = new Controller()

router = new Router()

应用程序的初始化：

Users = require('../collections/users.coffee')
Departments = require('../collections/departments.coffee')
UserListView = require('../views/user-list.coffee')
DepartmentListView = require('../views/department-list.coffee')


module.exports = class Controller extends Marionette.Controller


    ###
    initialize
    ----------
    ###
    initialize: ->
        @users = new Users()
        @userListView = new UserListView(collection: @users)
        @departments = new Departments()
        @departmentListView = new DepartmentListView(collection: @departments)

        @app = new Backbone.Marionette.Application()
        @app.addRegions(
            users: '.js-users-container'
            departments: '.js-departments-container'
        )
        @app.users.show(@userListView)
        @app.departments.show(@departmentListView)

        @app.on("initialize:after", ->
            Backbone.history.start()
        )

        # App will start when the department list is rendered
        @listenTo(@departmentListView, 'composite:collection:rendered', =>
            @app.start()
        )
        # catch filter events
        @listenTo(App.events, 'filter-users', (filters) =>
            @users.fetch(data: filters)
        )
        # load the departments collection, will render department list view
        @departments.fetch(data: active: 1)



    ###
    index
    -----
    ###
    index: ->
        App.events.trigger('filter-users', null)


    ###
    getByDepartment
    ---------------
    ###
    getByDepartment: (id) ->
        App.events.trigger('filter-users', department: id)

Controller = require('./controllers/main.coffee')


module.exports = class Router extends Backbone.Marionette.AppRouter
    appRoutes:
        "": "index"
        "department/:id": "getByDepartment"

    initialize: ->
        @controller = new Controller()

router = new Router()

如何改进此代码

---

提前感谢您的帮助

您不应该在控制器内创建新的应用程序。您应该创建一个应用程序，然后向其中添加包含您需要的各种功能区域的模块。下面是一个基本示例：

var app = new Backbone.Marionette.Application();

app.addRegions({
  users: '.js-users-container',
  departments: '.js-departments-container'
});

// more app initialisation from the function in your controller

app.module('i-need-a-good-name', function (Module, App, Backbone, Marionette, $, _) {
  // controller etc in here
});

app.start();

---

我的回答对你有帮助吗？如果我能改进，请告诉我