Backbone.jsコレクションをチャンクに分割

Question

スライド1本に6本のビデオを含むスライダーがあるので、ビデオコレクションがあります。

ここでは、コレクションを6つのビデオチャンクに分割し、各チャンク（スライド）のビューをレンダリングする必要があります。

私はバックボーンを初めて使っているので少し混乱しています。バックボーンでは「まったく」正しい方法がないことがわかりました。

マイソリューション：（ジョシュLeitzelのおかげで）

最初のスライドには、あなたの主なコンポーネントがslideViewになります3本のビデオ、他のすべての6

render: -> 
    $(@el).html(@template()) 

    count = 0 
    passed_first_slide = false 

    window.slide = new Backbone.Collection() 

    for model in @collection.models 
     count++ if slide.add(model) 
     if !passed_first_slide 
      videos_per_slide = 3 
     else 
      videos_per_slide = 6 
     if count % videos_per_slide is 0 
      @appendVideoSlide(slide) 
      slide.reset() 
      passed_first_slide = true 
      count = 0 if videos_per_slide = 3 

    @setup() 
    this 

appendVideoSlide: (slide) => 
    view = new Etaxi.Views.VideoSlide(collection: slide) 
    $('ul#slider-videos').append(view.render().el) 

Answer 1

を示しています。各slideViewには独自の動画のコレクションがあります。つまり、videosCollectionをサイズ6の多数の小さなコレクションに分割し、それぞれのコレクションのビューを作成できます。

私は正しい方向を指すようにいくつかのコードを書いています。あなたはライブの例hereをチェックアウトすることができます。

// Basic Backbone elements to work with 
var videoModel = Backbone.Model.extend(); 
var videosCollection = Backbone.Collection.extend(); 
var slideView = Backbone.View.extend({ 
    // Note: this is a terrible render function in practice, just used to show the point 
    render: function() { 
    $('body').append('<p>Slide:</p><ul>'); 
    _.each(this.collection.models, function(video) { 
     $('body').append('<li>' + video.get('name') + '</li>'); 
    }); 
    $('body').append('</ul>'); 
    } 
}); 

// Create a collection of 35 videos 
var videos = new videosCollection(); 
for (var i = 1; i <= 35; i++) { 
    videos.add(new videoModel({ name: 'Video ' + i })); 
} 

// Here's where the real partitioning comes in 
var slides = []; 
var numVideosPerSlide = 6; 
var videosClone = new videosCollection(videos.models); // create a clone of the collection so we can manipulate it safely 

while (videosClone.length > 0) { 
    // Pluck out the first X elements and add them to a new slideView 
    slides.push(new slideView({ 
    collection: new videosCollection(videosClone.first(numVideosPerSlide)) 
    })); 
    // Update the clone data to remove the elements we just added to slideView 
    videosClone = new videosCollection(videosClone.rest(numVideosPerSlide)); 
} 

// Render each slideView 
_.invoke(slides, 'render');