마리오 네트 합성보기에서 콜렉션을 렌더링합니다.

Question

필자는 IndexView()라는 마리오네트 합성보기를 가지고 있습니다. 그것은 index.html이라는 핸들 바 템플릿에 묶여 있습니다.

계속하기 전에 컬렉션의 각 모델을 출력하기 위해 항목보기를 합성보기에 연결하면됩니다. 나는이 일을 할 것이지만 나의 질문에 나의 이해를 요구하고 싶다.

나는 URL에서 컬렉션을 가져 오기 "/ API/사용자"

내가 코드를 가지고 내 사용자 컨트롤러에서이

[{"name": "John Doe", "age": 30 }, {"name":"Jane Doe", "age": 31}] 

같은 목록을

var usersCollection = new UsersCollection(); 
App.contentRegion.show(new IndexView({collection: usersCollection})); 
usersCollection.fetch(); 

방법 템플릿의 컬렉션을 반복합니까?

{{#each ????}} 
    <li> {{name}} {{age}} </li> 
{{/each}} 

무엇이 물음표가 될까요? ItemView에 대한 마리오 넷 문서에서 항목이됩니다. CollectionView 또는 CompositeView에서는 무엇이 될까요?

Answer 1

Marionette.CompositeView은 buildItemView() 빌드의 항목보기에 컬렉션 모델을 추가하는 방법을 사용합니다.

// Serialize the collection for the view. 
// You can override the `serializeData` method in your own view 
// definition, to provide custom serialization for your view's data. 

Marionette.CompositeView = Marionette.CollectionView.extend({ 
    // composite view implementation 
    serializeData: function() { 
     var data = {}; 
     if (this.model) { 
      data = this.model.toJSON(); 
     } 
     // your case 
     // data.myCollection = this.collection.toJSON(); 
     // then use myCollection in your template in place of ???? 
     return data; 
    } 
    // composite view implementation 
}); 

당신은의 CompositeView 템플릿 개체 또는 개체의 집합을 전달하는이 메소드를 오버라이드 (override) 할 수 있습니다

는 또한 기본 구현의 모습 serilizeData라는 기능이 있습니다.

아시다시피이 경우 템플릿에서 직접 컬렉션에 액세스하는 방법에는 다른 빌드가 없습니다.

Answer 2

템플릿의 컬렉션을 반복하지 않습니다. CompositeView는 내부적으로 콜렉션을 반복하고 콜렉션의 각 모델에 대한 ItemView를 렌더링합니다. 각 ItemView는 해당 컬렉션에서 데이터로 모델을받습니다. 각 개별 ItemView는 템플릿에 전달되는 모델 속성과 함께 렌더링됩니다. 따라서 ItemView의 템플릿에서는 컨텍스트가 단일 항목 (모델)을 나타 내기 때문에 각 항목을 반복 할 필요가 없습니다. 따라서 당신은 단순히있을 것입니다 템플릿 :

이

<li> {{name}} {{age}} </li> 
<li> {{someOtherAttribute}} </li> 
<li> {{andYetAnotherAttribute}} </li> 

편집 : 당신이 당신의 템플릿에 컬렉션을 반복하려면이 , 다음 CollectionView를 사용하지 마십시오. 이 같은 ItemView로 컬렉션을 전달합니다

view = new ItemView({collection: myCollection}); 

ItemView는 템플릿 컨텍스트의 items 속성에 템플릿 모델의 배열로 컬렉션을 전달합니다. 그래서 템플릿이 될 것이다 다음 ItemView 이제 모든 모델을 처리

{{#each items}} 
    <li> {{name}} {{age}} </li> 
{{/each}} 

으로, 당신의 이벤트가 더 이상 단일 모델하지만 전체 수집되지 않습니다.