2012-03-25 7 views
3

backbone.js를 사용하여 파일 관리자를 만들고 있습니다. CMS (컨텐츠 관리 시스템)의 일부인 건물이며 라이트 박스/모달 창을 통해 액세스 할 수 있습니다. 게시물과 같은 특정 콘텐츠 유형에 첨부 된 파일과 일반적으로 모든 파일을 모두 표시해야합니다.Backbone.js - 컬렉션 필터링 vs. 다중 컬렉션

이 시점에서 나는 libraryCollection (모든 파일)과 galleryCollection (게시물 파일)이라는 두 개의 별도 컬렉션을 가지고 있습니다. 이 메서드로 발생한 첫 번째 문제는 libraryCollection에서 파일을 편집하고 모델 변경 이벤트를 뷰에 바인딩하면 GalleryCollection 뷰에 영향을 미치지 않는다는 것입니다.

더 좋은 방법이 있나요? 내가 생각하기에 libraryCollection에 대한 페이지 매김이 필요하며 (서버에서 검색 한 xx 개의 결과 만 REAL 페이지 매김과 같이)이 작업을 복잡하게 만들 수 있습니다. 잠재적으로 컬렉션에 수천 개의 레코드를로드하지 않는 한 괜찮습니까?

는 업데이트 :

는 가장 빠른 (아마도 더러운) 방법은 Backbone.Events 시스템에 내장 사용하는 것이 었습니다. 샘플 코드 :

var aggregator = {}; 
_.extend(aggregator, Backbone.Events); 

aggregator.on("fileUpdated", function(model){ 
    if(app.libraryCollection && app.galleryCollection){ 
     libraryModel = app.libraryCollection.get(model.get("id")); 
     galleryModel = app.galleryCollection.get(model.get("id")); 
     libraryModel.set(model.attributes); 
     galleryModel.set(model.attributes); 
    } 
}); 

그런 다음 편집기보기 : 나는 렌더링 기능 (도시하지 않음) 모델 변경 이벤트를 바인딩 때문에

window.EditorView = Backbone.View.extend({ 

    saveModel: function(){ 
     self = this; 
     form = $(this.el).find("form").serializeArray(); 
     _.each(form, function(field){ 
      self.model.set(field["name"], field["value"]); 
     }); 
     self.model.save(); 
     aggregator.trigger("fileUpdated", this.model); 
    } 
}); 

이 모두 컬렉션에서 모델을 동기화하고, 뷰가 반영 라이브러리 및 갤러리보기에서 변경됩니다.

+1

"마스터"컬렉션 및 보조 "하위 세트"컬렉션의 문제에 대한 [슬 레드의 답변] (http://stackoverflow.com/a/6865316/45433)을 구축하는 데 성공했습니다. 다음 질문을 참조하십시오. http://stackoverflow.com/questions/8214712/implementing-backbone-subset-js-in-backbone-js-to-filter-models-from-a-parent-co –

+0

보다 확장 가능한 솔루션. 나는 시간이있을 때 그것을 더 조사 할 것이다. 감사합니다 – jymboche

+0

귀하의 업데이트에서 : 그것은 총체적입니다. 최소한 fileUpdated의 익명 fn은 galleryCollection보기의 메서드 여야합니다. 예를 들어 전역 범위에서 부동 상태가 아닌 galleryCollection 뷰에 의해 바인딩됩니다. –

답변

3

별도의 Backbone.js 구성 요소 간 통신 문제에 대한 잠재적 해결 방법은 이벤트 수집기입니다. 이벤트 집계 자 패턴에서보기와 같은 구성 요소는 응용 프로그램의 중앙 통신 허브 역할을하는 객체 인 집계 자에 대한 참조를 공유합니다. 다른보기에서 이벤트를 구독하는보기 대신에 두 가지 모두 수집기와 통신합니다. 수집기는 해당 유형의 메시지를 구독하는 구성 요소에 메시지를 전달합니다.

예를 들어 libraryCollection은 메시지의 file 개체를 전달하여 집합 자에서 fileAdded 이벤트를 발생시킬 수 있습니다. galleryCollection은 집계 자의 fileAdded 이벤트를 구독하며 서버에서 새로 고침하거나 전달 된 file 개체를 자체에 추가하는 등의 작업을 수행 할 때 약간의 동작이 필요합니다.

다음은 이벤트 수집 패턴을 다루는 excellent blog post입니다.

수천 개의 레코드를 한 번에 컬렉션에로드하면 문제가 생길 수 있습니다.

+0

백본에서 더 많은 기사를 보니 항상 기쁩니다. Backbone.js 이벤트 모듈을 전혀 알지 못했습니다. 나는 그것을 미래에 확실히 사용할 것입니다. 감사 – jymboche