Question

我刚刚开始使用Backbone.Marionette而且我在渲染具有多个嵌套项目的结构时遇到了问题。我有一个有很多频道的电视指南，每个频道有很多节目。 json结构是：

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

模型设置如下（使用coffeescript）：

class App.Program extends Backbone.Model

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

和收藏：

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)

使用Backbone.Marionette视图呈现以下结构的惯用方法是什么（我省略了我的视图实现，因为它太糟糕了）：

<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>

当渲染到DOM时，通道将具有与程序不同的事件处理程序，因此我需要清楚地呈现它们。

非常感谢任何帮助！

Answer 1

好的，我们想出了一个解决方案。这是代码：

%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

我们遇到的一个问题是模型，集合和视图的加载顺序。这对观点非常重要。我们发现如果未在Collection / Composite View中定义/加载itemView，则默认使用parent模板来呈现itemView。

Answer 2

您可以使用Marionette's CompositeView呈现模型的特定模板（整个表格）和任何行的特定视图

Backbone.Marionette和渲染嵌套结构

2 个答案: