lundi 18 septembre 2017

How to load data from API in parts using ember (ajax)

I have a problem while creating my app with Ember Infinity addon. I am using punkapi and ember infinity addon.

In my app I want to display a number of beers (let’s say 10 beers) and then, while scrolling to the bottom load next 10 beers and so on. Punkapi by default loads 25 beers and allows me to load max 80 beers (there are about 250 beers in API). So the URL looks kind of this: http://ift.tt/2xbx1Qc

Ember Infinity creates the very same URL, so it’s also limited to 80 beers. And paging doesn’t work, because when I scroll to the very bottom, it says that all content has been loaded.

My question is: How do I load 10 beers from API and then load next 10 and next 10 until the end, while scrolling to the bottom of the list?

Here’s my beer adapter:

import Application from ‘./application’;

export default Application.extend({
pathForType(){
return 'beers';
}
});

My beers route:

import Ember from ‘ember’; import InfinityRoute from “ember-infinity/mixins/route”;
export default Ember.Route.extend(InfinityRoute, {
model: function() {
return this.infinityModel(‘beer’, { perPage: 80, startingPage: 1 });
}
});

And my beer template:


<h 3></h 3>
<h 3></h 3>








Aucun commentaire:

Enregistrer un commentaire