Backbone.js Split Collection into chunks

Question

I have a slider which contains 6 videos per slide, so I have a Videos Collection.

Now I need to split the collection into chunks, each 6 videos, and render a view for each chunk ( a slide ).

I am a little confused about this because I am new to Backbone and I've found that there is rarely a "right" way of doing things in Backbone.

My Solution: (thanks to Josh Leitzel)

First slide shows 3 videos, every other 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

Your main component will be a slideView. Each slideView will have its own collection of videos—i.e., you can split the videosCollection into many smaller collections, each of size 6, and then create views for each of those collections.

I've written some code up that should point you in the right direction. You can check out a live example 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');