Backbone.Marionette을 사용한 그룹화 된 컬렉션 및 뷰

Question

같은 달에 생성 된 모든 문서가 함께 그룹화되도록 월 단위로 그룹화하려는 백본 컬렉션이 있습니다. 지금은에 어떤 항목이 컬렉션에 추가 할 때 자동으로 업데이트 백본보기를 설정하는 가장 좋은 방법은하는 날짜 byMonth 배열을 가지고

var byMonth = documents.groupBy(function(doc){ 
    return this.get('date').getMonth() 
}); 

: 나는 기본적으로이를 수 있다는 것을 알고 문서 중 하나가 변경 등 - 문서가 자동으로 올바른 그룹으로 이동하고 이에 따라보기가 업데이트됩니다.

추신. 또한 각 달에 대한 집계 데이터 (예 : 문서 수 등)를 표시하려고합니다.

Marionette의 CompositeView는 이러한 것들에 이상적이지만 그룹화 된 컬렉션으로 작동시킬 수 있는지 여부와 그 방법을 잘 모르겠습니다.

Answer 1

문서 컬렉션이 변경 될 때마다 byMonth 컬렉션을 새로 만들고 함수를 바인딩하여 재설정 할 수 있습니다.

컨트롤러

App.Controller = function(){ 
    this.documents = new DocumentCollection(); 
    this.byMonthCollection = new ByMonthCollection(); 
    this.byMonthView = new ByMonthView({collection: this.byMonthCollection}); 
} 

_.extend(App.Controller.prototype, { 
    start: function() { 
    this.documents.bind("change", _.bind(this.groupByMonth, this)); 
    this.documents.fetch(); 
    }, 
    groupByMonth: function() { 
    var grouped = documents.groupBy(function(doc){ 
        return this.get('date').getMonth() }); 

    this.byMonthCollection.reset(grouped); 
    } 
} 

Answer 2

나는이 많은 생각을했습니다, 그리고 완벽한 해답을 가지고 있지 않지만, 여기 내 노트 (뇌 덤프)가 도움이 경우에/새를 촉발 당신을위한 아이디어 :

컬렉션을 3 개의 섹션/그룹으로 나누어 표시하는 가장 좋은 방법 (예 : 자동 업데이트) 이 주, 다음 주 및

1. 필터보기 외부 컬렉션 곧 : 컨트롤러에서 필터링 하위 컬렉션을 만들고 각 CollectionView 한을 전달합니다. 자동 업데이트, CollectionView에서 필요하지 필터링 논리를 작동하지 않습니다, emptyView가 작동, 그것은 쉽게 될 것이다 : 직접
   • 프로 3 하위 컬렉션 수정)
     • A : 그런 다음 컬렉션을 수정하기위한 2 옵션이있다 각 섹션의 상단에 개수가 있습니다.
     • 단점 : 어디에서나 이러한 3 개의 컬렉션을 전달해야하며 이벤트를 추가/제거 할 때 추가 로직을 사용해야합니다 (if (event.time<next-week) {...} else if (event.time<upcoming) {...} else {...}). 모든 것을 3 개의 컬렉션 모두에 대한 참조를 가진 새로운 엔티티로 추상화하고 위의 로직을 포함하는 간단한 추가/제거 메소드를 가질 수 있습니다.
     • 다른 하위 모음간에 항목을 이동할 수 없습니다. 그룹화가 시간에 맞으면 중요 할 수 있습니다. Tho 나는 이것이 어쨌든 완전한 재 렌더링에서 일어난다 고 생각합니다. 그래서 당신은 updateSubCollections 메서드를 가질 수 있고 onBeforeRender 나 다른 것을 호출 할 수 있습니다.
   • B) 부모 컬렉션 만 수정 - 추가/제거시 컨트롤러의 각 하위 모음을 수동으로 다시 필터링하고 모든 3 개의 목록보기를 수동으로 다시 렌더링하려면 기본 모음의 수신기가 필요합니다.
     • Pro : CollectionView는 진짜 간단합니다. 필터링 로직이 없으며, emptyView가 작동하기 만하면 각 섹션의 상단에 카운트하는 것이 쉬울 것입니다.
     • 단점 : 당신은 자동 업데이트 마법을 잃게 (컬렉션 변경, 자동 collectionView있어 업데이트 할 때), 그리고 (비용) 전체 collectionView의 매번
2. 필터의 벙어리 재 - 렌더링 필요 보기 내부 컬렉션 : 전체 컬렉션을 각 CollectionView에 전달하고 appendHTML 메서드 (또는 showCollection)를 재정 의하여 조건을 만족하는 컬렉션 만 표시합니다.
   • 프로 : 자동 업데이트 마법을 얻고, 여전히 코드 어디에서나 하나의 컬렉션
   • 콘 처리 : 각 섹션의 상단에 카운트를 보여주기 위해 별도의 로직을 필요로한다. 빈 뷰를 표시하기위한 몇 가지 추가 논리가 필요하며 CollectionViews가이 용도로 설계되었는지 의심 스럽지만 다른 결과가있을 수 있습니다. 비효율적 일 수있는 연구가 필요한 모든 itemViews를 사용하여 영리한 작업을 수행 할 수 있습니다. 소스를 살펴보고 관련없는 항목을 처리하지 않아도되도록 오버라이드 할 최상위 (최상위 레벨) 함수를 찾으십시오.
단일보기 옵션 :보기의 appendHtml() 함수 내에서 컬렉션을 필터링하려면 페이지의 오른쪽 섹션.
• 프로 : 한 곳에서 모든 논리가 있지만 올바른 위치 (CollectionView)가 아닐 수도 있습니다. 자동 업데이트가 작동합니다. 코드의 모든 곳에서 단일 컬렉션 만 처리합니다.
• 단점 : 각 섹션 상단에 개수를 표시하는 추가 논리가 필요합니다. 각 섹션에 대해 수동으로 emptyView를 처리해야 할 필요가 있습니다. 템플릿에서 빈 메시지를 포함하는 모든 섹션을 정의하고 appendHtml 함수에서 항목이 속한 섹션을 파악하면됩니다. 추가하기 전에 해당 섹션에 대한 빈 메시지를 숨 깁니다. 문제는 컬렉션에서 항목을 제거 할 때 빈 섹션을 숨기는 방법입니다. 유일한 방법은 컬렉션에서 제거 이벤트를 수신하고 모든 섹션을 검사하여 비어 있는지 확인하는 것입니다. 또는 모든 것을 다시 렌더링하십시오. 내가 처음 내 현재 팀에 합류하면

, 그들은 내가 끔찍하다고 생각 옵션 (1B)를 구현 오래된 코드를했다. 그런 다음 비슷한 것을 구현해야 할 때 옵션 3을 사용했는데 효과가 있었지만 약간 시간이 지저분했습니다. 다음 번엔 옵션 1A를 시험해 보겠다.하지만 현재는 테스트되지 않았다. ...

내가 뭘했는지 알려줘!

편집 : Github에서의 마리오네트 프로젝트에 관련된 문제의 몇 :

• CollectionView/CompositeView should have an optional filter method
• Add ability to filter a collection view