title: Backbone.Marionette and rendering nested structures
body: <p>I'm just getting started with Backbone.Marionette and I'm having trouble rendering a structure with multiple nested items. I have a TV Guide that has many channels and each channel has many programs. The json structure is:</p>
  
  <pre><code>[
    {
      "name":"HBO",
      "number":"541",
      "programs":[
        {
           "name":"Game of Thrones"
        },
        {
           "name":"Gojir returns"
        }
      ]
    },
  
    {
      "name":"Showtime",
      "number":"666",
      "programs":[
        {
           "name":"Alex Cook Saves Space"
        },
        {
           "name":"A Clockwork Orange"
        }
      ]
    }
  ]
  </code></pre>
  
  <p>Models are setup like this (using coffeescript):</p>
  
  <pre><code>class App.Program extends Backbone.Model
  
  class App.Channel extends Backbone.Model
    initialize: -&gt;
      @programs = new App.Programs(@attributes.programs)  
  </code></pre>
  
  <p>And Collections:</p>
  
  <pre><code>class App.Programs extends Backbone.Collection
    model: App.Program
  
  class App.Channels extends Backbone.Collection
    model: App.Channel
  
  class App.Guide extends Backbone.Collection
    model: App.Channel
    url: -&gt; 'http://localhost:3000/guide'
  
    initialize: -&gt;
      @on('reset', @setChannels)
  
    setChannels: -&gt;
      @channels = new App.Channels(@models)
  </code></pre>
  
  <p>What would be the idiomatic way to render the following structure using Backbone.Marionette views (I left out my view implementation cuz it sucks):</p>
  
  <pre><code>&lt;table id="guide"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Channel&lt;/th&gt;
        &lt;th&gt;Program 1&lt;/th&gt;
        &lt;th&gt;Progarm 2&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="guide-row"&gt;
        &lt;td class="channel"&gt;541:HBO&lt;/td&gt;
        &lt;td class="program"&gt;Game of Thrones&lt;/td&gt;
        &lt;td class="program"&gt;Gojira Returns&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="guide-row"&gt;
        &lt;td class="channel"&gt;666:Showtime&lt;/td&gt;
        &lt;td class="program"&gt;Alex Cook Saves Space&lt;/td&gt;
        &lt;td class="program"&gt;A Clockwork Orange&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When rendered to the DOM, channels will have different event handlers than programs so I need to render them distinctly.</p>
  
  <p>Any help would be most appreciated!</p>