title: How can I improve the structure and initialization of this controller using Backbone and Marionette
body: <p>I'm developing a small app with Backbone and Marionette, that displays in a sidebar a list of department and in a main container a list of employee. </p>
  
  <p>User can select a department and filter the employee list by department. Here is the code of the controller and router, but I'm not satisfied of how I have to initialize the app in the controller.</p>
  
  <p><strong>the controller:</strong></p>
  
  <pre><code>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: -&gt;
          @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", -&gt;
              Backbone.history.start()
          )
  
          # App will start when the department list is rendered
          @listenTo(@departmentListView, 'composite:collection:rendered', =&gt;
              @app.start()
          )
          # catch filter events
          @listenTo(App.events, 'filter-users', (filters) =&gt;
              @users.fetch(data: filters)
          )
          # load the departments collection, will render department list view
          @departments.fetch(data: active: 1)
  
  
  
      ###
      index
      -----
      ###
      index: -&gt;
          App.events.trigger('filter-users', null)
  
  
      ###
      getByDepartment
      ---------------
      ###
      getByDepartment: (id) -&gt;
          App.events.trigger('filter-users', department: id)
  </code></pre>
  
  <p><strong>The router:</strong></p>
  
  <pre><code>Controller = require('./controllers/main.coffee')
  
  
  module.exports = class Router extends Backbone.Marionette.AppRouter
      appRoutes:
          "": "index"
          "department/:id": "getByDepartment"
  
      initialize: -&gt;
          @controller = new Controller()
  </code></pre>
  
  <p><strong>Initialization of the app:</strong></p>
  
  <pre><code>router = new Router()
  </code></pre>
  
  <p>How could I improve this code?</p>
  
  <p>Thanks in advance for your help!</p>