2014-07-09 2 views
1

컬렉션의 페이지가 매겨진보기를 원합니다. Backbone.Paginator를 사용해 보았지만 작동시키지 못했습니다.백본 : 다른 컬렉션의 조각에서 컬렉션 만들기

저는 개인적으로 페이지 매기기를 할거라 생각했는데 전체 컬렉션을 갖고 큰 그림을 작은 컬렉션으로 보내고 누군가가 클릭 할 때마다이 작업을 수행하는 것이 좋습니다. 다음 것'.

나는이 일을 시도했지만 작동하지 않습니다 : 그것은 severals을해야 할 때

var purchaseCollection = new purchaseItemCollection({url:endpoints.purchases}); 

purchaseCollection.fetch(); 

var purchaseRangeCollection = new Backbone.Collection(purchaseCollection.models), 
    purchaseView = new purchaseItemCollectionView({collection:purchaseRangeCollection}); 

내 두 번째 컬렉션을 하나 개의 모델로 구성된다.

이것이 최선의 방법인지 궁금합니다.

다른 방법에서 그것을 할 방법 컬렉션, 또는 어떻게 로 컬렉션을 분할에 대한 조언 정말 감사하겠습니다!

답변

1

사용자 지정 개체를 사용하여 현재 선택된 모델 목록을 나타내는 컬렉션을 제어 할 수 있습니다. 예를 들어

,

var Slicer = function(opts) { 
    opts || (opts = {}); 

    // your big collection 
    this.collection = opts.collection || new Backbone.Collection(); 

    // a collection filled with the currently selected models 
    this.sliced = new Backbone.Collection(); 
}; 

_.extend(Slicer.prototype, Backbone.Events, { 
    // a method to slice the original collection and fill the container 
    slice: function(begin, end) { 
     var models = this.collection.models.slice(begin, end); 
     this.sliced.reset(models); 

     // triggers a custom event for convenience 
     this.trigger('sliced', this.sliced); 
    } 
}); 
그런 다음보기를 업데이트하기 위해이 컨트롤러의 인스턴스를 생성하거나이 개체 또는 sliced 수집에 reset 이벤트에 사용자 정의 이벤트 sliced을들을 것

:

var controller = new Slicer({ 
    collection: purchaseCollection 
}); 
controller.on('sliced', function(c) { 
    console.log('sliced', c.pluck('id')); 
}); 
controller.sliced.on('reset', function(c) { 
    console.log('reset', c.pluck('id')); 
}); 

그리고 데모는 http://jsfiddle.net/nikoshr/zjgkF/

주 그쪽으로 재생 또한 비동기 특성 인 fetch을 고려해야하므로 모델을 즉시 사용할 수 없습니다. 이 설정에서는

var purchaseCollection = new purchaseItemCollection(
    [], // you have to pass an array 
    {url:endpoints.purchases} // and then your options 
); 
purchaseCollection.fetch().then(function() { 
    // do what you want 
    // for example 
    controller.slice(0, 10); 
}); 
등의 작업을 수행합니다.
1

전체 컬렉션의 model을 다른 독립적 인 컬렉션으로 정의 할 수 있습니다. 그런 다음 fetch() 이후에 전체 컬렉션의 model으로 컬렉션을 가져올 수 있습니다.

var PurchaseCollection = Backbone.Collection.extend({ 
    model: Backbone.Collection 
}) 

var purchaseCollection = new PurchaseCollection({url:endpoints.purchases}); 
purchaseCollection.fetch() 

purchaseCollection.each(function (purchaseItem, index) { 
    //the purchaseItem is what you want... 
    //do anything... 
}); 

demo, click here을 원한다면.