Marionette.js CompositeView - 중첩없이 모델 및 컬렉션을 렌더링하는 방법

Question

저는 지금 당분간이 문제를 해결하려고 노력했기 때문에 도움을 요청하고 싶습니다. 나는 나무 구조 및 CompositeViews에 Derick Bailey's blog post을 읽었습니다. 나는 또한 David Sulc's을 읽었지만 거기에 설명 된 것보다 약간 다른 유스 케이스라고 생각한다. 참고 : 내 프로젝트는 Marionette.js 1.0.3을 사용합니다.

전자 메일을받은 편지함처럼 작동하는 무언가를 만들려고합니다. 전자 메일은 스레드 일 수 있습니다. 즉, 전자 메일에 연결된 다른 전자 메일이 있습니다. 받은 편지함보기는 <table>에 렌더링되며, 각 <tr>은 이메일입니다.

[ 
    {id: 1, subject: 'One', threads: []}, 
    {id: 2, subject: 'Two', threads: [ 
    {id: 3, subject: 'Three', threads: []}, 
    {id: 4, subject: 'Four', threads: []} 
    ]}, 
    {id: 5, subject: 'Five', threads: []} 
] 

내보기

는 다음과 같이 구성됩니다 :처럼 내 JSON 보인다

InboxView = Marionette.CompositeView.extend({ 
    // edited for brevity 
    initialize: function(options) { 
    this.itemView = EmailView; 
    } 
    // edited for brevity 
}); 

EmailView = Marionette.CompositeView.extend({ 
    // edited for brevity 
    tagName: 'tr', 
    initialize: function(options) { 
    this.collection = this.model.get('threads'); 
    }, 
    onRender: function() { 
    if (this.model.isThread()) this.$el.addClass('thread'); 
    } 
    // edited for brevity 
}); 

난 데 문제는 그 난의 CompositeView 번 다음 모델을 렌더링함으로써 나를 위해 마법을 작업 할 경우 스레드 컬렉션을 한 번, 원래의 이메일 (부모)의 <tr> 안에있는 두 개의 테이블 행 <tr> (각 스레드 당 하나씩)로 끝납니다.

InboxView 및 EmailView에는 재사용을 시도하는 기능이 있습니다. 내가 끝내려고하는 것은 같은 레벨에 표시된 모든 행을 가진 테이블입니다.

당신이 이것을 읽고 나를 돕고 싶다면, 미리 감사드립니다!

Answer 1

먼저 DOM에보기를 첨부해야합니다. 자식 뷰는 DOM에 연결되기 전에 렌더링되므로 오류가 발생합니다. 문제를 해결하기 위해 몇 가지 방법을 재정의 할 수 있습니다. `,`이력서 $의 el.after. (IV $ 엘.) :

EmailView = Marionette.CompositeView.extend({ 

    className: function() { 
     return this.model.isThread() ? 'thread' : null; 
    }, 

    initialize: function (options) { 
     this.collection = new Backbone.Collection(this.model.get('threads')); 
    }, 

    renderItemView: function(view, index) {   
     this.$el.parent().append(view.el); 

     view.render(); 
    } 

}); 

InboxView = Marionette.CompositeView.extend({ 

    itemView: EmailView, 

    ui: { 
     $tbody: 'tbody' 
    }, 

    renderItemView: function (view, index) { 
     this.ui.$tbody.append(view.el); 

     view.render(); 
    } 

}); 

JSFiddle : http://jsfiddle.net/d1krtxtr/