Ember Problems Infiniscroll with an API

Datetime:2016-08-23 02:52:24          Topic:          Share

Instead of clicking next for days, let's hookup infiniscroll! This is part 3 of my 10 part series on Ember Problems.

For this project we'll be using the projects from thelast post:

We'll be using hhff/ember-infinity . It's pleasantly customizable and looks like it will be supported through the future.

ember install ember-infinity

https://github.com/hhff/ember-infinity .

What we need to hook it up

So, here's a rundown of the data we need to make this work. All of these values can be customized, but we only need to do one. Check the documentation if you need to customize more.

Variable Default From our API Direction Description
Page Size page_size page_size Sending Size of return payload
Page page page Sending Current index in current dataset
Page meta.total meta.pagination.totalPages Receiving Current pages, given other variables

Hooking it up in our route

After installing, let's hook our route up based on the documentation on hhff/ember-infinity .

// routes/posts.js
import Ember from 'ember';
import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute, {
  totalPagesParam: "meta.pagination.totalPages",    // instead of "meta.total_pages"

  model(params) {
    return this.infinityModel('post', {
      perPage: 12,
      startingPage: 1
    });
  }
});

Simplifying our controller

Since we don't rely on interactions from our template to advance our model, we can greatly simplify our controller.

import Ember from 'ember';

export default Ember.Controller.extend({
  metaData: Ember.computed('model', function() {
    let metadata = this.store.metadataFor('post');
    return Ember.get(metadata, 'pagination');
  }),
});

The Template

And finally our template:

<div class="clearfix">
  <h1 class="border-bottom py2 center">Posts ({{metaData.total}})</h1>
</div>
{{#each model as |post|}}
  <div class="p2 border-bottom uppercase">
    <div class="bold">{{post.title}}</div>
    <p>
      {{post.body}}
    </p>
  </div>
{{/each}}
{{infinity-loader infinityModel=model destroyOnInfinity=true}}

And :boom: it's done!