gallery.handlebars

<script type="text/x-handlebars">
  {{view Gallery.SelectionView photosetsBinding="Gallery.PhotosetsController.current_page"}}
</script>

<script type="text/x-handlebars" data-template-name="selection">
  {{#view SC.Button action="previous_page" targetBinding="Gallery.PhotosetsController"}}Previous{{/view}}
  {{#view SC.Button action="next_page" targetBinding="Gallery.PhotosetsController"}}Next{{/view}}
  {{collection contentBinding="photosets" itemViewClass="Gallery.PhotosetSelectView"}}
</script>

photosets_controller.js

Gallery.PhotosetsController = SC.ArrayProxy.create({
  content: [],
  selected: null,
  page: 0,
  per_page: 7,
  current_page: [],

  next_page: function() {
    if (this.get("page") == this._last_page_index()) return;
    this.set("page", this.get("page") + 1);
  },

  previous_page: function() {
    if (this.get("page") == 0) return;
    this.set("page", this.get("page") - 1)
  },

  _load_current_page: function() {
    var begin = this.get("page") * this.get("per_page");
    var end = begin + this.get("per_page");
    this.set("current_page", this.slice(begin, end));
  }.observes("page", "@each"),

  _last_page_index: function() {
    return this.get("length") / this.get("per_page") - 1;
  }
});

selection_view.js

Gallery.SelectionView = SC.View.extend({
  templateName: 'selection',
  photosets: []
});