템플릿에서 참조 할 백본 컬렉션 뮤 테이터

Question

Model에 사용 된 것과 유사한 변형자를 사용하는 방법은 Backbone.js/Marionette이지만 Collection에 있습니까?

MyCollection.js에서 :

다음

export default Backbone.Collection.extend({ 
    model: MyModel, 
    ... 
    mutators: { 
     foo: function() { 
      if (this.models.length) 
       return this.models[0].get('foo'); 
      return "default value"; 
     } 
    } 
}) 

MyModel.js에서 :

export default Backbone.Model.extend({ 
    mutators: { 
     foo: function() { 
      return "bar"; 
     } 
    } 
}) 

그리고 template.ejs에서 예를 들어

<div> 
    <h1><%= myCollection.foo %></h1> 
    <% for (var myModel of myCollection) { %> 
     <span><%= myModel.foo %></span> 
    <% } %> 
</div> 

나는 TypeError: Cannot read property 'foo' of undefined 오류를 얻는 것 같다, 그래서 ' 이것이 가능한지 또는 변경이 있는지 궁금해한다. 네이트 방법? 나는 MyCollection.foo 로직을 템플릿으로 이동하는 것을 피하고 싶지만, 가장 쉬운 방법 인 것 같다.

Answer 1

우선 돌연변이가 백본이나 네트의 일부가 아닙니다. 플러그인 Backbone.Mutators을 사용하고있는 것 같습니다. 컬렉션보다는 모델을 사용하기로되어 있습니다.

코드에 많은 문제가 있습니다. 우선 다음 코드는 수집 및 모델의 생성자에서 속성에 액세스하려고하는 두 번째

foo: { 
     if (this.models.length) 
      return this.models[0].get('foo'); 
     return "default value"; 
    } 

유효하지 않습니다. 컬렉션 인스턴스의 models 속성에서 데이터 및 액세스 모델 인스턴스로 인스턴스를 만들어야합니다.

<div> 
    <h1><%= myCollection.foo %></h1> 
    <% for (var myModel of myCollection.models) { %> 
     <span><%= myModel.get("foo") %></span> 
    <% } %> 
</div> 

문서에 컬렉션이있는 예제가 없으므로 컬렉션과 함께 작동하는지 궁금합니다.

사용중인 플러그인 및 프레임 워크의 문서를 읽고 당신이 무슨 일을하는지 이해하려고주세요 ...

Answer 2

이 Collection s는 Backbone.Mutators 플러그인을 지원하지 않습니다 나타납니다. 가장 쉬운 대안은 단지 Marionette.View의 serializeData 방법, 즉에 Object을 추가하는 것 같다

여기 Mutators

serializeData: function() { 
    return { models: this.collection.models, foo: this.collection.foo().toJSON() }; 
} 

도 필요하지 않습니다, foo이 MyCollection 단지 기능입니다.

Answer 3

템플릿을 처리하고 렌더링하기 위해보기가 필요합니다.

이

CollectionView가 지정된 컬렉션의 모든 모델을 통해 루프, 그들 각각의 특정 사용하여 렌더링 : 마리오네트 당신이 찾고있는 아마 인 CollectionView API를, 문서에서 https://marionettejs.com/docs/master/marionette.collectionview.html#rendering-collectionviews 견적을 가지고 childView, 그런 다음 자식보기의 el 결과를 보기 el에 추가하십시오. 기본적으로 CollectionView는 정렬 된 컬렉션 순서를 DOM에 유지합니다. 초기화시 {sort : false}를 지정하면 이 동작을 중지 할 수 있습니다.