Data loading patterns - Pagination

21 June 2018

The different aspects of loading data from the back-end in a web application (more precisely, an Ember.js application) has fascinated me for quite some time. It’s a huge topic, a subset of which I presented on at last year’s EmberConf.

As one of the chapters of the advanced-level book I’m writing, Rock & Roll with Ember.js 3 – Encore, will cover the same topic, I made a screencast a few weeks ago about how to add pagination to a list in an Ember.js app (a list of songs belonging to a band).

The screencast extends to almost 34 minutes during which I cover:

If you watched the video, there’s one more thing I’d like to add.

Towards the end, I implement a solution for paging through the list of songs that doesn’t use the refreshModel configuration variable.

However, as one of the comments pointed out, not using refreshModel will break the Back button. Because Ember creates a query-param only transition and since the change in the pageNumber query param alone doesn’t re-trigger the model hook (= doesn’t refresh the model), no fresh data is loaded from the back-end and the list of songs stays the same (the one displayed on the original page number).

So don’t feel bad about using refreshModel.