Backbone.Marionette 및 중첩 된 구조의 렌더링

Backbone.Marionette을 시작하기 만하고 중첩 된 항목이 여러 개있는 구조를 렌더링하는 데 문제가 있습니다. 나는 많은 채널을 가지고있는 TV Guide를 가지고 있고 각 채널은 많은 프로그램을 가지고있다. json으로 구조는 다음과 같습니다Backbone.Marionette 및 중첩 된 구조의 렌더링

class App.Program extends Backbone.Model 

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

그리고 컬렉션 :

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

모델이 (사용하는 커피 스크립트)와 같은 설정이다

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에 렌더링 될 때 채널은 프로그램과 다른 이벤트 처리기를 가지므로 뚜렷하게 렌더링해야합니다.

도움이 될 것입니다.

출처

2012-09-19 Chris Kilmer