How to render view with Backbone Marionette - backbone.js

Question

I'm using Backbone.Marionette and need to render a view of employees and their respective departments. I want it to look something like so:
Department 1
***
Employee1
Employee2
Employee3
Department 2
***
Employee4
Employee5
Employee6
Employee7
Employee8
Department 3
***
Employee9
Employee10
My collection looks like this:
Employee1 / Department1
Employee2 / Department1
Employee3 / Department1
Employee4 / Department2
Employee5 / Department2
etc.
As the department changes I need to render the department heading.
Which combination of view types would I use. Collection view, Composite view. Would I need to put logic in the view/template?

Answer 1

The end result can be broken down fairly easily, to determine what view types to use.
You have a collection of Departments that you want to render. A CollectionView would handle this, allowing each department to be rendered on it's own.
The department itself has complex needs. It needs to show a header (the department name) and some detail - a list of employees. This sounds like a collection view with a wrapper template... a CompositeView.
Each department's composite view then needs to render a list of employees. THe employee information seems fairly simple, so an ItemView would suffice.
The end result would be:
CollectionView
- CompositeView (department)
- ItemView (employee)
... Of course your actual data structure doesn't work very well for this layout because you have the relationship inverted where employee knows what department it belongs to. You'll either need to invert the data / relationship so that departments know what employees they have on the server / returned JSON, or do some client side filtering and grouping to get to that result.