CODEWITHSUNDEEP
backbone.jsmarionette
Mads Lee Jensen
Mads Lee Jensen

Reputation: 4648

Marionette multiple controllers for nested views

Im wondering how to structure nested controllers in Marionette, I have this hierarchy

Menu (module)
  MenuController
    MenuItemCollectionView
        MenuItemView
            MenuItemDropdownController
                MenuItemDropdownLayout
                    MenuItemDropdownSidebarView
                    MenuItemDropdownContentView

Basicly im building a navigation menu similar to polygon.com (when you hover over items a "dropdown" appear).

I looked alot after some examples of "nested controllers" in Marionette but without luck, my understanding is i need to separate out a Controller for each Dropdown, and maybe aslo a controller for each MenuItemView. The way ive seen examples of something similar is that the "High level controller" is responsible for everything. Maybe my understanding of controllers in Marionette is wrong, and they are more intented for Routing purpose.

How would you guys structure this would you have the MenuItemView be responsible for creating a MenuItemDropdownController? (which i find abit odd.)

Or maybe im thinking about this the wrong way maybe this should be separated into multiple modules? but i cant really wrap that around in my head, as i see modules as single items like a "Menu" / "Login form" etc and not items in a collection view.

Upvotes: 1

Views: 1392

Answers (2)

kay.one
kay.one

Reputation: 7692

Neither backbone nor Marionette have strong opinion on how a controller should be used beyond routing.

In practice controllers and routes are used to put applications into a specific state, in your example I think you are overusing controllers. In your case a single controller should be enough to handle your menu.

Upvotes: 0

David Sulc
David Sulc

Reputation: 25994

You should have one single controller to handle your menu.

This case should be manageable using composite views, and I wrote a blog post with a similar objective here: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

The complexity of your various subviews could also be handled by using Marionette layouts.

You can see an example of a controller handling a layout here (see contactsListLayout): https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L43

Basically, a layout is "a view containing subviews in their own regions".

Handling nested layouts is explained in more detail in the book that builds the above app (available here).

Upvotes: 1

Related Questions