Creating Reusable Pagination Controls for Ember.js

The post describes a reusable Ember component for pagination. It starts with currentPage and totalPages, uses a computed pageItems list to drive the template, and keeps the UI simple by letting the component update currentPage directly.

Reading notes

#

• The component is built on Foundation’s pagination markup and CSS.
• It starts with currentPage and totalPages as the core properties.
• A computed pageItems property generates the page objects used by the template.
• Clicking a page updates currentPage through an action handler.
• The template iterates over pageItems to render clickable page numbers.
• The page objects are plain JavaScript objects because they are recomputed when dependent keys change.
• Previous and next arrow controls are added with canStepForward and canStepBackward computed properties.
• The arrows are shown as unavailable when movement is not possible.
• When the page count is large, the component adds maxPagesToDisplay to truncate the list.
• The truncation logic inserts ellipses and tries to keep pages near the current page visible.
• The author notes that the implementation could be more efficient but is good enough in practice.
• The wrap-up credits Ember’s computed properties and bindings for making the component easy to build.