Simple Backbone.js 컬렉션 무제한 페이징

Question

내 서버 측 API는 고전적인 결과 페이징 모델을 따릅니다.

/API/거래/=> 1 페이지 (10 개 항목의 기본 제한) /API/거래 /? p = 2 => 2 페이지

내가 백본 경관을 감상 할 수있는 무한 스크롤 시스템을 구축하고자합니다.

이미 비 페이징 컬렉션 +보기 설정이 있습니다. 상위 뷰는 다음과 같습니다

이

Backbone.View.extend({ 

    initialize: function() { 

     this.collection = TransactionCollection; 
     this.fetch(); 

     this.listenTo(this.collection, 'reset', this.renderEntries); 
     this.listenTo(this.collection, 'add', this.fetch); 

     this.rowViews = []; 
     this.render(); 
    }, 

    fetch: function() { 
     this.collection.fetch({ reset:true }); 
    }, 

    render: function() { 

     this.$el.html(template()); 
     this.renderEntries(); 

     return this; 
    }, 

    renderEntries: function() { 
     this.clearEntryRows(); 
     this.collection.each(function(item) { 
      var row = new TransactionItemView(item); 
      this.rowViews.push(row); 
      this.$el.find('.entry-list').append(row.render().el); 
     }, this); 
    }, 

    clearEntryRows: function() { 
     this.rowViews.forEach(function(v) { 
      if (v.close) v.close(); 
     }); 
     this.rowViews = []; 
    }, 

// ... 
} 

이 뷰 코드 (아이 뷰 템플릿으로 자신을 렌더링, 간단한 항목들이다)의 관련 부분이다.

컬렉션은 여전히 ​​매우 기본적인 : 지금은 페이지 매김을 추가하는 시간

var TransactionCollection = Backbone.Collection.extend({ 
    model: Transaction, 
    url: '/api/transactions' 
}); 

입니다. 각 renderEntries() 호출 후에 "MORE ..."버튼을 추가 할 것입니다. 이 단추는 콜렉션을 재설정하지 않고 다음 페이지를 가져오고 다른 renderEntries가 호출됩니다. this.clearEntryRows()가 재설정 콜백으로 이동됩니다.

내 질문은 : 어떻게하면 두 번째 페이지를 가져 와서 컬렉션을 재설정하지 않고 모델을 추가하고 그 이벤트를 차단하여 다음 항목 페이지를 렌더링 할 수 있습니까? '동기화'이벤트에 대한 내용을 읽었습니다. '리셋'은 리셋으로 가져올 때만 초기화됩니다. '사실'컬렉션을 가져올 때마다 '동기화'가 시작됩니다.

이것이 맞으면 재설정 이벤트에서만 입력 행을 삭제하고 행을 동기화하여 표시 할 수 있습니다. 하지만 새로 추가 된 행 (예 : 2 페이지) 만 내 목록에 표시하려면 어떻게해야합니까?

나는 약간 혼란 스럽다.

Answer 1

this.collection.fetch({ add: true, remove: false, merge: false, data: {p: 2} }); 

이렇게하면 지정된 get 매개 변수로 가져오고 컬렉션에 기존 항목을 추가하지 않을 수 있습니다. 보기에

:

initialize: function() { 
    this.listenTo(this.collection, 'add', handlerForRenderingNewEntries); 
} 

는 새로운 모델을 렌더링하려면, 당신은 예를 들어 특정 속성, 추가 특성 '페이지'로 반환 할 수 있습니다. 이 속성으로 필터하고 렌더러에게 보냅니다.