1

我刚刚开始使用 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 时，通道将具有与程序不同的事件处理程序，因此我需要清楚地渲染它们。

非常感激任何的帮助！

4

2 回答 2

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

我们遇到的问题之一是模型、集合和视图的加载顺序。这对视图非常重要。我们发现，如果一个 itemView 没有在 Collection/Composite View 中定义/加载，默认是使用父模板来渲染 itemView。

于 2012-09-20T18:40:31.497 回答
-1

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

于 2012-09-20T08:29:05.437 回答