CODEWITHSUNDEEP
backbone.jsmarionette
Maxime P
Maxime P

Reputation: 775

How can I improve the structure and initialization of this controller using Backbone and Marionette

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.

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.

the controller:

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)

The router:

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


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

    initialize: ->
        @controller = new Controller()

Initialization of the app:

router = new Router()

How could I improve this code?

Thanks in advance for your help!

Upvotes: 0

Views: 266

Answers (1)

martin308
martin308

Reputation: 716

You shouldn't be creating a new Application inside your controller. You should create a single Application and then add modules to it containing the various areas of functionality that you need. Here is a basic example below:

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();

Upvotes: 2

Related Questions