Displaying Nested Models in Marionette - json

Question

I'm sending a nested model as JSON to a Marionette app. It looks something like this:
{
"Course1": [
{
"id": 51,
"title": "Assignment1",
"created_at": "2013-09-01T08:47:37.908+09:00",
"updated_at": "2013-09-09T20:53:00.193+09:00",
},
{
"id": 52,
"title": "Assignment2",
"created_at": "2013-09-01T09:11:40.547+09:00",
"updated_at": "2013-09-09T20:52:37.630+09:00",
}
],
"Course2": [
{
"id": 19,
"title": "Assignment1",
"created_at": "2013-08-08T22:49:26.621+09:00",
"updated_at": "2013-09-09T20:48:20.015+09:00",
},
{
"id": 20,
"title": "Assignment2",
"created_at": "2013-08-08T23:03:58.131+09:00",
"updated_at": "2013-09-09T20:47:53.997+09:00",
}
],
"Course3": [
{
"id": 29,
"title": "Assignment1",
"created_at": "2013-08-18T09:22:32.299+09:00",
"updated_at": "2013-09-09T20:47:32.971+09:00",
},
{
"id": 30,
"title": "Assignment2",
"created_at": "2013-08-18T09:33:16.882+09:00",
"updated_at": "2013-09-09T20:02:08.731+09:00",
}
]
}
I'm wondering if there is some way to display each "course" and the data nested within the courses as a table in a Marionette view. I don't know how many courses I'll be sending to Marionette on any given request.
Is there some way to iterate over the data above (as a collection in the Marionette app) and dynamically make a new CompositeView for each course?

Answer 1

You could use Underscore each function. Something like this:
var data = <your JSON data here>;
_.each(data, function(value, key, list) {
var compView = new <yourCustomCompositeView>({ collection: value });
// render the view in whatever region you need to
});
That would create a new CompositeView for each entry in your JSON. Here's the documenation for that function: http://underscorejs.org/#each
Update
Take a look at http://jsfiddle.net/craigjennings11/D2qAC/ on a way to solve this. It might not be the cleanest, but it gets the job done. Note that I specify a custom region that overloads the open method for the layout, and then call open to attach the views to the region instead of show. show closes the region before calling open again, which would remove your previous view.

Answer 2

I realize now how foolish I was! What I was trying to do is part of the core Backbone.Marionette functionality.
I needed only to nest the List.Assignments CompositeView inside the List.Courses CompositeView.
#ControlPanel.module "AssignmentsApp.List", (List, App, Backbone, Marionette, $, _) ->
class List.Controller extends Marionette.Controller
initialize: ->
# This is a collection of courses with nested assignments
# as described in the original question.
App.request "courses:entities", (courses) =>
#coursesView = #getCoursesView courses
App.mainRegion.show #coursesView
getCoursesView: (courses) ->
new List.Courses
collection: courses
class List.Assignment extends Marionette.ItemView
template: "assignments/list/templates/assignment"
tagName: "li"
class List.Assignments extends Marionette.CompositeView
template: "assignments/list/templates/assignments"
tagName: "li"
itemView: List.Assignment
itemViewContainer: "ul"
# This is the important part...
initialize: ->
# Get the nested assignments for this particular course
assignments = #model.get("assignments")
# At this point assignments is a regular Javascript object.
# For this to work assignments must be a valid Backbone collection
#collection = new Backbone.collection assignments
class List.Courses extends Marionette.CompositeView
template: "assignments/list/templates/courses"
itemView: List.Assignments
itemViewContainer: "ul"