The right pattern for returning pagination data with the ember-data RESTAdapter?

Question

I'm displaying a list of articles in a page that are fetched using the Ember Data RESTAdapter. I need to implement a bootstrap'esque paginator (see: http://twitter.github.com/bootstrap/components.html#pagination) and cant seem to find a sane pattern for returning pagination data such as, page count, article count, current page, within a single request.

For example, I'd like the API to return something like:

{
  articles: [{...}, {...}],
  page: 3,
  article_count: 4525,
  per_page: 20
}

One idea was to add an App.Paginator DS.Model so the response could look like:

{
  articles: [{...}, {...}],
  paginator: {
    page: 3,
    article_count: 4525,
    per_page: 20
  }
}

But this seems like overkill to hack together for something so trivial. Has anyone solved this problem or found a particular pattern they like? Is there a simple way to manage the RESTAdapter mappings to account for scenarios such as this?

I don't think there's a set convention for this yet. You can take a look at [Ember Table](https://github.com/Addepar/ember-table) and see how they implement it, since the demo shows infinite scrolling for 500 000 records and is quite fast. — Jakub Arnold, Jan 17 '13 at 08:05
Ember Table is a way to display data, not how to load them. The question seems to be focused on handle meta data from API for pagination. I think this question is related: http://goo.gl/GPnP1 . But I really dislike the proposed solution.. — louiscoquio, Jan 17 '13 at 09:35
@louiscoquio that's definitely not a pretty solution but not far off of what I feel as the obvious, hacked, soluton. I need to beging working on this today so I'll share results. — Tyler Love, Jan 18 '13 at 18:56
@louiscoquio the RESTSerializer has special handling for a "meta" property in the json response but, as pointed out in the related question, it's not exposed anywhere. I'm going to move forward with the custom serializer hack since it should be easy to integrate with a better solution in the near future. In my opinion the DS.RecordArray should have special properties like meta included. In that case, perhaps a better naming convention would be DS.Result or similar. — Tyler Love, Jan 18 '13 at 21:03

score 4 · Answer 1 · answered Jan 24 '13 at 00:26

Try to use Ember Pagination Support Mixin and provide your own implementation of the following method. Instead of loading all the content, you can fetch the required content when the user is navigating the pages. All what you need initially is the total account of your records.

didRequestRange: function(rangeStart, rangeStop) {
    var content = this.get('fullContent').slice(rangeStart, rangeStop);
    this.replace(0, this.get('length'), content);
  }

score 3 · Answer 2 · answered Nov 29 '13 at 08:41

With ember-data-beta3 you can pass a meta-property in your result. The default RESTSerializer looks for that property and stores it. You can access the meta-data like this:

var meta = this.get("store").metadataFor("post");

If you are not able to change the JSON returned from the server you could override the extractMeta-hook on the ApplicationSerializer (or any other Model-specific serializer).

App.ApplicationSerializer = DS.RESTSerializer.extend({
  extractMeta: function(store, type, payload) {
    if (payload && payload.total) {
      store.metaForType(type, { total: payload.total });  // sets the metadata for "post"
      delete payload.total;  // keeps ember data from trying to parse "total" as a record
    }
  }
});

The right pattern for returning pagination data with the ember-data RESTAdapter?

2 Answers2