서버에서 백본 컬렉션을 필터링하는 방법

Question

Backbone을 사용하여 서버의 컬렉션을 필터링하는 일반적인 패턴이 있습니까? Google 및 스택 오버플로 검색에서 아무것도 찾을 수 없었습니다. 프로덕션 환경에서 백본 앱 수가 많아서 놀랍습니다.

---

백본을 사용하여 스택 오버플로를위한 새로운 프런트 엔드를 구축한다고 가정합니다.

검색 화면에서 다음 정보를 서버에 전달하고 유용한 결과 페이지를 가져와야합니다.

등뼈가 보이지 않는다

• 필터 기준
• 정렬 기준 페이지 당
• 결과
• 페이지 번호가 서버에 필터링 오프로드에 많은 관심을 가지고 있습니다. 서버가 전체 질문 목록을 반환하고 클라이언트 측에서 필터링을 수행 할 것으로 기대합니다.

  이 작업을 수행하려면 Collection의 하위 클래스를 만들고 fetch 메서드를 재정의해야하므로 항상 동일한 RESTful URL에서 데이터를 가져 오는 대신 위 매개 변수를 전달해야합니다.

  나는 바퀴를 재발 명하고 싶지 않습니다. Backbone에서이 프로세스를 기존 구성 요소보다 간단하거나 더 쉽게 만들 수있는 기능이 누락 되었습니까? 이 문제를 해결하기 위해 이미 잘 정립 된 패턴이 있습니까?

Answer 1

요청에 GET 매개 변수를 전달하려는 경우 페치 호출 자체에서 매개 변수를 지정할 수 있습니다.

collection.fetch({ 
    data: { 
    sortDir: "ASC", 
    totalResults: 100 
    } 
}); 

옵션은 직접 jQuery.ajax 호출로 변환해야 가져 오기에 전달, 데이터 속성이 자동으로 구문 분석을하셔야합니다. 물론 fetch 메소드를 재정의하는 것은 좋습니다. 특히 논리의 일부를 표준화하려는 경우에 특히 좋습니다.

Answer 2

OData를 제외한 서버 페이지 매김에 대한 표준이 없으므로 자신 만의 Collection을 만드는 것이 좋습니다.

'fetch'를 대체하는 대신, 보통 이러한 경우에 수행 할 작업은 collection.url 속성을 함수로 만들고 컬렉션 상태를 기반으로 적절한 URL을 반환합니다.

페이지 매기기를 수행하려면 페이지 당 X 항목을 기준으로 페이지 수를 계산할 수 있도록 서버에서 총 항목 수를 반환해야합니다. 요즘 일부 API는 기본적으로 HTTP 응답 헤더 인 HAL 또는 HATEOAS와 같은 것을 사용하고 있습니다. 이 정보를 얻으려면 일반적으로 AJAX 조작 후 발생하는 sync 이벤트에 리스너를 추가합니다. 사용 가능한 항목/페이지 수의 외부 구성 요소 (일반적으로보기)에 알릴 필요가있는 경우 이벤트를 사용하십시오.

간단한 예 : 서버가 응답 헤더에 X-ItemTotalCount을 반환하고 요청 쿼리 문자열에 page 및 items 매개 변수가 필요합니다.우리는 또 다른 자신의 속성을 사용

var PagedCollection = Backbone.Collection.extend({ 
    initialize: function(models,options){ 
    this.listenTo(this, "sync", this._parseHeaders); 
    this.currentPage = 0; 
    this.pageSize = 10; 
    this.itemCount = 0; 
    }, 
    url: function() { 
    return this.baseUrl + "?page=" + this.currentPage + "&items=" + this.pageSize; 
    }, 
    _parseHeaders: function(collection,response){ 
    var totalItems = response.xhr.getResponseHeader("X-ItemTotalCount"); 
    if(totalItems){ 
     this.itemCount = parseInt(totalItems); 
     //trigger an event with arguments (collection, totalItems) 
     this.trigger("pages:itemcount", this, this.itemCount); 
    } 
    } 
}); 

var PostCollection = PagedCollection.extend({ 
    baseUrl: "/posts" 
}); 

공지 사항, baseUrl는 PagedCollection을 확장 단순화합니다. 당신이 당신의 자신의 initialize을 추가해야하는 경우, 부모의 프로토 타입이 같은 하나를 호출하거나 헤더를 구문 분석하지 않습니다

PagedCollection.protoype.initialize.apply(this,arguments)

당신은 당신이 단순히 컬렉션에 fetchNext 및 fetchPrevious 방법을 추가 할 수 있습니다 this.currentPage 및 fetch을 수정하십시오. 한 페이지를 추가하는 대신 다른 페이지로 바꾸려면 {reset:true}을 fetch 옵션으로 추가해야합니다.

이제 프로젝트의 백엔드가 일관성이 있다면 서버에서 페이지 매김을 허용하는 리소스는 동일한 매개 변수/응답이 사용된다면 클라이언트의 PagedCollection 기반 컬렉션을 사용하여 나타낼 수 있습니다.