How to render view with Backbone Marionette

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.