Pagination when the endpoint is not standard.

[nandanself]

I am using your ember-infinty addon in my ember app.The problem I am facing is that my pagination endpoint in the backend is not standard.

Pagination api

http://example.com/api/feed/?start=0&end=5;

Now I can change the value of start and end when api call and get the result.Is there a way by which I can use ember-infinity in this case.If yes please tell me how.If not tell me how to write pagination for this case ( may be a tutorial or two ).Thanks in advance.Also if I am able to do this.I am computing the feed using Ember.computed and making some changes in feed data.So how do I recomputed the feed in controller whenever model changes ?

[hhff]

Something like this should work:

export default Ember.Route.extend(InfinityRoute, {
  mostRecentPage: 0,
  pagesPerFetch: 5,

  nextPageToFetch: Ember.computed('mostRecentPage', 'pagesPerFetch', function() {
    return this.get('mostRecentPage') + this.get('pagesPerFetch');
  }),

  model() {
    return this.infinityModel("post", {}, {
      start: 'mostRecentPage',
      end: 'nextPageToFetch'
    });
  },

  afterInfinityModel(posts) {
    this.set('mostRecentPage', this.get('nextPageToFetch'));
  }
});

You'll need to do some extra setting up the case when there's less that 5 pages left on the server, but that should be pretty simple!

[nandanself]

import Ember from 'ember';
import raw from 'ic-ajax';
import InfinityRoute from "ember-infinity/mixins/route";

const { service } = Ember.inject;

export default Ember.Route.extend(InfinityRoute,{
mostRecentPage: 0,
pagesPerFetch: 5,
nextPageToFetch: Ember.computed('mostRecentPage', 'pagesPerFetch', function() {
return this.get('mostRecentPage') + this.get('pagesPerFetch');
}),

fakeSignup:service('fake-session'),

model(){
var signup = this.get('fakeSignup.isSignedUp');
if(signup === "true"){
var inflector = Ember.Inflector.inflector;
inflector.uncountable('feed');
inflector.uncountable('profile');
return Ember.RSVP.hash({
feed:this.infinityModel('feed',{}, {
start: 'mostRecentPage',
end: 'nextPageToFetch'
}),
profile:this.store.queryRecord('profile',{target:-1}),
});
}
},

afterInfinityModel(feed) {
this.set('mostRecentPage', this.get('nextPageToFetch'));
}
});

@hhff I tried what you told above.The first made to server is

http://www.example.com/api/photos/feed/?end=5&page=1&per_page=25&start=0

Though I am getting the data from the server side.But when I scroll down just "loading infinite model" text is displayed and no api is being called.

[nandanself]

Hey

I tried it but it working for first call.after scroll it doesn't load any
data.I have given my code also on github issue

Thanks
Maruti

On Mon, Mar 21, 2016 at 9:04 PM, Hugh Francis [email protected]
wrote:

Something like this should work:

export default Ember.Route.extend(InfinityRoute, {
mostRecentPage: 0,
pagesPerFetch: 5,

nextPageToFetch: Ember.computed('mostRecentPage', 'pagesPerFetch', function() {
return this.get('mostRecentPage') + this.get('pagesPerFetch');
}),

model() {
return this.infinityModel("post", {}, {
start: 'mostRecentPage',
end: 'nextPageToFetch'
});
},

afterInfinityModel(posts) {
this.set('mostRecentPage', this.get('nextPageToFetch'));
}
});

You'll need to do some extra setting up the case when there's less that 5
pages left on the server, but that should be pretty simple!

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#148 (comment)

[sebbean]

@nandanself your code is not formatted. Very hard to read.

[hhff]

@nandanself - that is most likely due to the meta object in your payload not containing information about the total pages in the set.