Backbone.Marionette和渲染嵌套结构

Question

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:

[
  {
    "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"
      }
    ]
  }
]

Models are setup like this (using coffeescript):

class App.Program extends Backbone.Model

class App.Channel extends Backbone.Model
  initialize: ->
    @programs = new App.Programs(@attributes.programs)  

And Collections:

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: -> 'http://localhost:3000/guide'

  initialize: ->
    @on('reset', @setChannels)

  setChannels: ->
    @channels = new App.Channels(@models)

What would be the idiomatic way to render the following structure using Backbone.Marionette views (I left out my view implementation cuz it sucks):

<table id="guide">
  <thead>
    <tr>
      <th>Channel</th>
      <th>Program 1</th>
      <th>Progarm 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="guide-row">
      <td class="channel">541:HBO</td>
      <td class="program">Game of Thrones</td>
      <td class="program">Gojira Returns</td>
    </tr>
    <tr class="guide-row">
      <td class="channel">666:Showtime</td>
      <td class="program">Alex Cook Saves Space</td>
      <td class="program">A Clockwork Orange</td>
    </tr>
  </tbody>
</table>

When rendered to the DOM, channels will have different event handlers than programs so I need to render them distinctly.

Any help would be most appreciated!

Answer 1

Okay, we came up with a solution. Here is the code:

%script{type: 'text/html', id: 'channel-template'}
  %td.channel <%= number %>: <%= name %>

%script{type: 'text/html', id: 'program-template'}
  <%= name %>

class App.Program extends Backbone.Model

class App.Programs extends Backbone.Collection
  model: App.Program

class App.ProgramView extends Backbone.Marionette.ItemView
  className: 'program'
  template: "#program-template"
  tagName: 'td'

class App.Channel extends Backbone.Model
  initialize: ->
    programs = @get("programs")
    if programs
      @programs = new App.Programs(programs)

class App.Channels extends Backbone.Collection
  model: App.Channel
  url: -> "http://localhost:3000/guide"

class App.ChannelView extends Backbone.Marionette.CompositeView
  className: 'guide-row'
  itemView: App.ProgramView
  tagName: 'tr'
  template: "#channel-template"

  initialize: ->
    @collection = @model.programs

class App.GuideView extends Backbone.Marionette.CollectionView
  id: '#guide'
  tagName: 'table'
  itemView: App.ChannelView

One of the problems we ran into was the load order of the models, collections and views. It is very important for the Views. We discovered that if an itemView isn't defined / loaded in a Collection / Composite View, the default is to use the parents template to render the itemView.

Answer 2

您可以使用Marionette的CompositeView为模型（整个表格）呈现特定的模板，为任何行呈现特定的View