Marioette.js에서 CollectionView의 CollectionView를 어떻게 가질 수 있습니까?

Question

collectionViews (또는 합성보기) 컬렉션을 렌더링하려는 유스 케이스가 있습니다. marionette.js를 사용하여이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

A1 
| 
|--B1 
| | 
| C1 
| | 
| C2 
| | 
| C3 
| 
|--B2 
    | 
    C4 
    | 
    C5 
    | 
    C6 

이 작업을 수행하는 가장 좋은 방법은 무엇인가 - 나는 다음과 같이 렌더링 할

A 
| 
|-- Collection<B> 
       | 
       |--Collection<C> 

follows-로

내 모델 구조는? 나는 그래서 당신이 표시하려고하는 아이가 컬렉션이 경우, 또는 그냥 모델의 경우 제빙 수 Collection 뷰를 작성하여이를 달성 할 수 그것은이

A1 
| 
|--B1 
| | 
| |--C1 
| | 
| |--C2 
| | 
| |--C3 
| 
|--B2 
    | 
    |--C4 
    | 
    |--C5 
    | 
    |--C6 

Answer 1

처럼되고 싶지 않아. 그래서이 예제에서는 이름과 선택적 콜렉션이있는 모델을 설정했습니다. 콜렉션이 사용되면 선택적 콜렉션을 가질 수있는 모델 콜렉션이 포함됩니다.

다음 컬렉션보기를 정의하면 컬렉션보기에서 자식 컬렉션이 있는지 확인하고 컬렉션 뷰가 자식으로 컬렉션보기를 사용합니다.

//collection view that can choose to display another collection view or a model 
myApp.Views.View1 = Marionette.CollectionView.extend({ 
    tagName: "ul", 
    //overridden getChildView to return either another collection view or an item view 
    getChildView: function (child) { 
     if (child.get("collection")) { 
      return myApp.Views.View1; 
     } 
     return myApp.Views.ItemView; 
    }, 

    //set either the collection or the model depending which view we are using 
    childViewOptions: function (model, index) { 
     if (model.get("collection")) { 
      return { 
       collection: model.get("collection"), 
      } 
     } else { 
      return { 
       model: model 
      } 
     } 
    } 
}); 

그 다음에 그냥 모델

//item view to display final model 
myApp.Views.ItemView = Marionette.ItemView.extend({ 
    tagName: "li", 
    template: _.template('<%= name %>'), 
}) 

여기

실행중인 표시 할 항목보기를 사용하지 않는 경우 - 당신의 이름을 표시하고 싶었 http://jsfiddle.net/leighking2/r5ogoL5h/

에게 모델을 컬렉션 위에 렌더링하면 컴포지트 뷰를 사용할 수 있으므로 컬렉션을 표시하기 위해 뷰에 연결하여 더 많은 제어를 허용합니다.

,210

http://jsfiddle.net/leighking2/kx9kuup0/

유일한 문제는, 아직 렌더링 당신이 복합 내부보기 만 해결 될 수 일부 조정과 복합보기를 표시 할 때 이중 <ul>와 끝까지 같이 HTML이 100 % 유효하다 올바르게.