1

Backbone.Marionette を使い始めたばかりで、複数のネストされたアイテムを含む構造のレンダリングに問題があります。多くのチャンネルを持つ TV ガイドがあり、各チャンネルには多くの番組があります。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

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.

于 2012-09-20T18:40:31.497 に答える
-1

Marionette の CompositeViewを使用して、モデル (テーブル全体) の特定のテンプレートと、任意の行の特定のビューをレンダリングできます。

于 2012-09-20T08:29:05.437 に答える